Menghindari ukuran DOM yang berlebihan

Hierarki DOM yang besar dapat memperlambat performa halaman Anda dengan beberapa cara:

  • Efisiensi jaringan dan performa beban

    Hierarki DOM yang besar sering kali menyertakan banyak node yang tidak terlihat saat pengguna memuat halaman untuk pertama kalinya, yang tidak perlu meningkatkan biaya data untuk pengguna dan memperlambat waktu pemuatan.

  • Kinerja runtime

    Saat pengguna dan skrip berinteraksi dengan halaman Anda, browser harus terus-menerus menghitung ulang posisi dan gaya node. Hierarki DOM besar yang dikombinasikan dengan aturan gaya yang rumit dapat sangat memperlambat rendering dan interaktivitas.

  • Performa memori

    Jika JavaScript Anda menggunakan pemilih kueri umum seperti document.querySelectorAll('li'), Anda mungkin tanpa sadar menyimpan referensi ke node dalam jumlah sangat besar, yang dapat membebani kemampuan memori perangkat pengguna.

Cara audit ukuran DOM Lighthouse gagal

Lighthouse melaporkan total elemen DOM untuk halaman, kedalaman DOM maksimum halaman, dan elemen turunan maksimumnya:

Menghindari audit Lighthouse ukuran DOM yang berlebihan yang menampilkan total elemen DOM, kedalaman DOM maksimum, dan elemen turunan maksimum.
Lighthouse menyoroti detail ukuran DOM yang berlebihan

Lighthouse menandai halaman dengan hierarki DOM yang:

  • Memperingatkan saat elemen isi memiliki lebih dari ~800 node.
  • Error saat elemen isi memiliki lebih dari ~1.400 node.

Cara mengoptimalkan ukuran DOM

Secara umum, cari cara untuk membuat node DOM hanya saat diperlukan, dan hancurkan node saat tidak diperlukan lagi.

Jika Anda mengirimkan hierarki DOM yang besar, coba muat halaman Anda dan catat secara manual node mana yang ditampilkan. Mungkin Anda dapat menghapus node yang tidak ditampilkan dari dokumen yang dimuat pertama kali 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 Perubahan Subtree 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 dari Google untuk mengetahui informasi selengkapnya.

Untuk mengetahui detail selengkapnya, lihat artikel Pengaruh ukuran DOM yang besar terhadap interaktivitas, dan tindakan yang dapat Anda lakukan.

Panduan khusus stack

Angular

Jika Anda merender daftar besar, gunakan scroll virtual dengan Component Dev Kit (CDK).

React

  • Gunakan library "windowing" seperti react-window untuk meminimalkan jumlah node DOM yang dibuat jika Anda merender banyak elemen berulang di halaman.
  • Minimalkan render ulang yang tidak perlu menggunakan shouldComponentUpdate, PureComponent, atau React.memo.
  • Lewati efek hanya sampai dependensi tertentu telah berubah jika Anda menggunakan hook Effect untuk meningkatkan performa runtime.

Resource