Lighthouse DOM Treemap - DOM'nin Boyutu Nasıl Küçültülür
Son birkaç yılda Google, web uygulamanızın aşırı boyutuyla ilgili birçok uyarı yayınladı. Bu, kullanıcıya çok yüksek bir maliyet getirir: tarayıcının yavaş oluşturması ve düşük performansı ve kullanıcı deneyimi.
Uygulamanızın performansını iyileştirmek için Lighthouse'u tanıttı. DOM boyutunu küçültme seçeneği. Birçok şirket için bu önlem, bellek tüketimini ve bunun sonucunda da genel belgenin boyutunu azaltmak için uygulandı. Ne yazık ki, bellek tüketiminde, en azından Chrome'da çok küçük bir iyileştirme, bu performans sorununu geri getirebilir.
Bu konuda size yardımcı olmak için Chrome artık DOM ağacında gerçekten ağır olan yerleri bulmanıza yardımcı olacak yeni bir özelliğimiz var: DOM Treemap.
Ağaç Haritası, Chrome Geliştirici Araçları'nın bir uzantısıdır. DOM ağacı görselleştirmesi için fazladan bir sekme ekleyebilirsiniz.
Geçerli sayfanızdaki tüm DOM düğümlerinin konumunu görebilirsiniz. Hangi öğelerin en çok çocuğa sahip olduğunu bulmak için araç çubuğunun sağ alt köşesindeki "Çocuklar" düğmesini tıklamanız yeterlidir.
Araç ayrıca BEM meraklılarını görselleştirme özelliğiyle genişletildi. Bu, BEM bileşeninizin ortalama olarak ne kadar düğüm yoğunluğu olduğunu görmenizi sağlar.
