Mengoptimalkan ukuran DOM

Connor Clark
Connor Clark
X GitHub

Dipublikasikan: 8 Okt 2025

DOM yang besar dapat meningkatkan durasi penghitungan gaya dan tata letak, yang memengaruhi responsivitas halaman. DOM yang besar juga meningkatkan penggunaan memori.

Pohon DOM yang dalam bukanlah masalah performa dengan sendirinya, tetapi merupakan gejala pola desain yang menggunakan nesting elemen yang tidak perlu.

Insight ini mempertimbangkan seluruh DOM, termasuk dalam shadow root. Metode ini mengabaikan node DOM yang bukan juga elemen. Hal ini juga mengabaikan konten <iframe>.

Yang harus diperhatikan:

  • Total elemen: Jumlah keseluruhan elemen di DOM halaman Anda.
  • Kedalaman DOM: Kedalaman maksimum hierarki DOM.
  • Sebagian besar turunan: Elemen dengan elemen turunan terbanyak.

Cara meneruskan insight ini

Insight ini hanya gagal jika ada penghitungan ulang tata letak atau gaya yang besar yang melebihi durasi 40 md.

  • Update tata letak besar melibatkan lebih dari 100 objek tata letak (yang kira-kira merupakan elemen).
  • Penghitungan ulang gaya besar memengaruhi lebih dari 300 elemen.

Jika gagal, di panel Performa, insight ini akan menandai peristiwa tersebut dalam flame chart.

Untuk mengurangi biaya acara ini:

Panduan khusus stack

Insight ini juga menawarkan panduan khusus stack untuk halaman yang menggunakan teknologi berikut:

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 berubah jika Anda menggunakan hook Effect untuk meningkatkan performa runtime.

Referensi tambahan