Menghindari ukuran DOM yang berlebihan

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:

Screenshot Lighthouse Menghindari audit ukuran DOM yang berlebihan

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, atau React.memo.
  • Lewati efek hanya hingga dependensi tertentu berubah jika Anda menggunakan hook Effect untuk meningkatkan performa runtime.

Referensi