Hierarki DOM yang besar dapat memperlambat performa halaman dengan beberapa cara:
Efisiensi jaringan dan performa beban
Hierarki DOM yang besar sering kali menyertakan banyak node yang tidak terlihat saat pengguna pertama kali memuat halaman, sehingga akan meningkatkan biaya data bagi pengguna dan memperlambat waktu pemuatan.
Performa runtime
Saat pengguna dan skrip berinteraksi dengan halaman Anda, browser harus terus menghitung ulang posisi dan gaya visual node. Hierarki DOM besar yang dikombinasikan dengan aturan gaya yang rumit dapat memperlambat rendering.
Performa memori
Jika JavaScript menggunakan pemilih kueri umum seperti
document.querySelectorAll('li')
, Anda mungkin tanpa sadar menyimpan referensi ke node dalam jumlah yang sangat besar, sehingga dapat membebani kemampuan memori perangkat pengguna Anda.
Cara audit ukuran DOM Lighthouse gagal
Lighthouse melaporkan total elemen DOM untuk sebuah halaman, kedalaman DOM maksimum halaman, dan elemen turunan maksimumnya:
Lighthouse menandai halaman dengan hierarki DOM yang:
- Memperingatkan saat elemen isi memiliki lebih dari ~800 node.
- Error jika elemen isi memiliki lebih dari ~1.400 node.
Cara mengoptimalkan ukuran DOM
Secara umum, cari cara untuk membuat node DOM hanya jika diperlukan, dan menghancurkan node jika tidak diperlukan lagi.
Jika saat ini Anda mengirimkan hierarki DOM besar, coba muat halaman Anda dan catat node mana yang ditampilkan secara manual. Mungkin Anda dapat menghapus node yang belum ditampilkan dari dokumen yang pertama kali dimuat dan hanya membuatnya setelah interaksi pengguna yang relevan, seperti scroll atau klik tombol.
Jika Anda membuat node DOM saat runtime, Titik Henti Sementara Perubahan DOM Subtree Modifikasi dapat membantu Anda menentukan kapan node dibuat.
Jika Anda tidak dapat menghindari hierarki DOM yang besar, pendekatan lain untuk meningkatkan performa rendering adalah menyederhanakan pemilih CSS. Lihat Mengurangi Cakupan dan Kompleksitas Penghitungan Gaya Google untuk informasi selengkapnya.
Panduan khusus stack
Angular
Jika Anda merender daftar besar, gunakan scroll virtual dengan Component Dev Kit (CDK).
Reaksi
- Gunakan library "windowing" seperti
react-window
untuk meminimalkan jumlah node DOM yang dibuat jika Anda merender banyak elemen berulang pada halaman. - Minimalkan rendering ulang yang tidak perlu menggunakan
shouldComponentUpdate
,PureComponent
, atauReact.memo
. - Lewati efek
hanya hingga dependensi tertentu berubah jika Anda menggunakan hook
Effect
untuk meningkatkan performa runtime.