Aşırı büyük bir DOM boyutundan kaçının

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:

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 veya React.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.

Kaynaklar

• Aşırı büyük bir DOM boyutunu önleme denetimi için kaynak kodu
• Stil Hesaplamalarının Kapsamını ve Karmaşıklığını Azaltma