Lighthouse DOM Treemap - Cara Mengurangi Ukuran DOM
Dalam beberapa tahun terakhir Google telah mengeluarkan banyak peringatan terkait ukuran aplikasi web Anda yang berlebihan. Ini menimbulkan biaya yang sangat tinggi bagi pengguna: perenderan lambat dan kinerja browser dan pengalaman pengguna yang buruk.
Untuk meningkatkan kinerja aplikasi Anda, Lighthouse telah memperkenalkan opsi untuk mengurangi ukuran DOM. Bagi banyak perusahaan, ukuran ini telah diterapkan untuk mengurangi konsumsi memori dan sebagai hasilnya, ukuran dokumen secara keseluruhan. Sayangnya, peningkatan yang sangat kecil dalam konsumsi memori, setidaknya di Chrome, dapat mengembalikan masalah kinerja ini.
Untuk membantu Anda dalam hal ini, di Chrome kami sekarang memiliki fitur baru untuk membantu Anda menemukan tempat di pohon DOM yang sangat berat: DOM Treemap.
Treemap adalah ekstensi untuk Chrome Alat Pengembang, di mana Anda dapat menambahkan tab tambahan untuk visualisasi pohon DOM.
Anda dapat melihat lokasi semua simpul DOM di halaman Anda saat ini. Untuk menemukan elemen mana yang memiliki anak paling banyak, cukup klik tombol "Anak-anak" di sudut kanan bawah bilah alat.
Alat ini juga telah diperluas dengan fitur untuk memvisualisasikan penggemar BEM. Ini memungkinkan Anda untuk melihat seberapa intensif node komponen BEM Anda secara rata-rata.
