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

Büyük bir DOM ağacı, sayfanızın performansını birçok şekilde 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 çok sayıda düğüm içerir. Bu da 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ı düğümlerin konumunu ve stilini sürekli olarak yeniden hesaplaması gerekir. Karmaşık stil kurallarıyla birlikte büyük bir DOM ağacı, oluşturmayı önemli ölçüde yavaşlatabilir.

  • Bellek performansı

    JavaScript'iniz document.querySelectorAll('li') gibi genel sorgu seçiciler kullanıyorsa farkında olmadan çok fazla sayıda düğüme referansları saklıyor olabilirsiniz. Bu da kullanıcılarınızın cihazlarının bellek kapasitesini aşabilir.

Lighthouse DOM boyutu denetimi nasıl başarısız oluyor?

Lighthouse, bir sayfa için toplam DOM öğelerini, sayfanın maksimum DOM derinliğini ve maksimum alt öğelerini raporlar:

Lighthouse'un ekran görüntüsü, aşırı miktarda DOM boyutu denetlemesini önlüyor

Lighthouse, şu özelliklere sahip DOM ağaçları içeren sayfaları işaretler:

  • Gövde öğesinde ~800'den fazla düğüm olduğunda uyarır.
  • Gövde öğesinde yaklaşık 1.400 düğümden fazla olduğunda oluşan hatalar.

DOM boyutunu optimize etme

Genel olarak, yalnızca gerektiğinde DOM düğümleri oluşturmanın ve artık ihtiyaç duyulmadığında düğümleri kaldırmanın yollarını arayın.

Şu anda büyük bir DOM ağacı gönderiyorsanız sayfanızı yüklemeyi ve hangi düğümlerin görüntülendiğini manuel olarak belirtmeyi deneyin. Görüntülenmeyen düğümleri başlangıçta yüklenen belgeden kaldırabilir ve bunları yalnızca kaydırma veya düğmeyi tıklama 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şikliği DOM Değişikliği 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 başka 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 bölümüne bakın.

Yığına özel rehberlik

Angular

Büyük listeler oluşturuyorsanız Bileşen Geliştirme Kiti (CDK) ile sanal kaydırma özelliğini 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ı kullanıyorsanız yalnızca belirli bağımlılıklar değişene kadar etkileri atlayın.

Kaynaklar