Büyük bir DOM ağacı, sayfanızın performansını çeşitli şekillerde yavaşlatabilir:
Ağ verimliliği ve yük performansı
Büyük bir DOM ağacı genellikle kullanıcı sayfayı ilk yüklediğinde görünmeyen birçok düğüm içerir. Bu, kullanıcılarınızın veri maliyetlerini gereksiz şekilde artırır ve yükleme süresini yavaşlatır.
Çalışma zamanı performansı
Kullanıcılar ve komut dosyaları sayfanızla etkileşim kurdukça tarayıcının düğümlerin konumunu ve stilini sürekli olarak yeniden hesaplaması gerekir. Büyük bir DOM ağacı, karmaşık stil kurallarıyla birlikte kullanıldığında, oluşturma sürecini ciddi ölçüde yavaşlatabilir.
Bellek performansı
JavaScript'iniz
document.querySelectorAll('li')
gibi genel sorgu seçiciler kullanıyorsa farkında olmadan çok sayıda düğüme ait referansları depoluyor olabilirsiniz. Bu da kullanıcılarınızın cihazlarının bellek kapasitesini aşar hale getirebilir.
Lighthouse DOM boyutu denetiminin başarısız olması
Lighthouse bir sayfanın toplam DOM öğelerini, sayfanın maksimum DOM derinliğini ve maksimum alt öğelerini bildirir:
![Toplam DOM öğesi, maksimum DOM derinliği ve maksimum alt öğe sayısını gösteren, aşırı DOM boyutu Ligthhouse denetiminden kaçınır.](https://developer.chrome.com/static/docs/lighthouse/performance/dom-size/image/lighthouse-excessive-dom-size-audit.png?authuser=5&hl=tr)
Lighthouse, aşağıdaki özelliklere sahip DOM ağaçları içeren sayfaları işaretler:
- Gövde öğesi ~800'den fazla düğüme sahip olduğunda uyarır.
- Gövde öğesi yaklaşık 1.400'den fazla düğüme sahip olduğunda hatalar oluşur.
DOM boyutunu optimize etme
Genel olarak, DOM düğümlerini yalnızca gerektiğinde oluşturmanın yollarını arayın ve artık ihtiyaç duyulmayan düğümleri yok edin.
Büyük bir DOM ağacı gönderiyorsanız sayfanızı yüklemeyi ve hangi düğümlerin gösterileceğini manuel olarak not etmeyi deneyin. Gösterilmeyen düğümleri ilk yüklenen belgeden kaldırıp bunları yalnızca kaydırma veya düğme tıklaması gibi alakalı bir kullanıcı etkileşiminden sonra oluşturabilirsiniz.
Çalışma zamanında DOM düğümleri oluşturursanız Alt Ağaç Değiştirme DOM Değişiklik Kesme Noktaları, düğümlerin ne zaman oluşturulduğunu belirlemenize yardımcı olabilir.
Büyük bir DOM ağacından kaçınamıyorsanız, oluşturma performansını iyileştirmeye yönelik bir diğer yaklaşım da CSS seçicilerinizi basitleştirmektir. Daha fazla bilgi için Google'ın Stil Hesaplamalarının Kapsamını ve Karmaşıklığını Azaltma belgesine bakın.
Daha ayrıntılı bilgi için Büyük DOM boyutlarının etkileşim üzerindeki etkisi ve bununla ilgili neler yapabileceğiniz başlıklı makaleye bakın.
Gruba özel yönergeler
Angular
Büyük listeler oluşturuyorsanız Bileşen Geliştirme Kiti (CDK) ile sanal kaydırma kullanın.
Tepki ver
- Sayfada çok sayıda tekrarlanan öğe oluşturuyorsanız oluşturulan DOM düğümlerinin sayısını en aza indirmek için
react-window
gibi bir "pencereleme" kitaplığı kullanın. shouldComponentUpdate
,PureComponent
veyaReact.memo
kullanarak gereksiz yeniden oluşturma sayısını en aza indirin.- Çalışma zamanı performansını iyileştirmek için
Effect
kancasını kullanıyorsanız yalnızca belirli bağımlılıklar değişene kadar efektleri atlayın.