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

Büyük bir DOM ağacı, sayfa performansınızı birden fazla ş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 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 kurarken tarayıcı, düğümlerin konumunu ve stilini sürekli olarak yeniden hesaplamalıdır. Karmaşık stil kurallarıyla birlikte büyük bir DOM ağacı, oluşturma işlemini ve etkileşimi ciddi şekilde yavaşlatabilir.

• Bellek performansı

  JavaScript'inizde document.querySelectorAll('li') gibi genel sorgu seçicileri kullanılıyorsa farkında olmadan çok sayıda düğüme referans depolayabilirsiniz. Bu da kullanıcılarınızın cihazlarının bellek kapasitesini aşabilir.

Lighthouse DOM boyutu denetimi neden başarısız olur?

Lighthouse, bir sayfanın toplam DOM öğe sayısını, sayfanın maksimum DOM derinliğini ve maksimum alt öğe sayısını raporlar:

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

• body öğesinde yaklaşık 800'den fazla düğüm olduğunda uyarı verir.
• Gövde öğesinde yaklaşık 1.400'den fazla düğüm olduğunda hatalar.

DOM boyutunu optimize etme

Genel olarak, DOM düğümlerini yalnızca gerektiğinde oluşturmanın ve artık gerekli olmayan düğümleri ortadan kaldırmanın yollarını arayın.

Büyük bir DOM ağacı gönderiyorsanız sayfanızı yüklemeyi ve hangi düğümlerin gösterildiğini manuel olarak not etmeyi deneyin. Gösterilmeyen düğümleri ilk yüklenen belgeden kaldırabilir ve 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 başka bir yaklaşım, 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şturma işlemi yapıyorsanız Bileşen Geliştirme Kiti (CDK) ile sanal kaydırma özelliğini kullanın.

React

• Sayfada çok sayıda yinelenen öğ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şinceye kadar etkileri atlayın.

Kaynaklar

• Aşırı büyük bir DOM boyutundan kaçının denetimi için kaynak kod
• Stil Hesaplamalarının Kapsamını ve Karmaşıklığını Azaltma