DOM boyutunu optimize edin

Connor Clark
Connor Clark
X GitHub

Yayınlanma tarihi: 8 Ekim 2025

Büyük bir DOM, stil hesaplamalarının ve düzenlerin daha uzun sürmesine neden olarak sayfanın yanıt verme hızını etkileyebilir. Büyük bir DOM, bellek kullanımını da artırır.

Derin bir DOM ağacı kendi başına bir performans sorunu değildir ancak gereksiz öğe yerleştirme kullanan tasarım kalıplarının bir belirtisidir.

Bu analiz, gölge kökler de dahil olmak üzere DOM'un tamamını dikkate alır. Aynı zamanda öğe olmayan DOM düğümlerini yoksayar. Ayrıca <iframe> içeriklerini de yoksayar.

Dikkat edilecek noktalar:

  • Toplam öğe sayısı: Sayfanızın DOM'sindeki toplam öğe sayısı.
  • DOM derinliği: DOM ağacının maksimum derinliği.
  • En çok alt öğe: En çok alt öğeye sahip olan öğe.

Bu analizden nasıl yararlanabilirsiniz?

Bu analiz yalnızca 40 ms'yi aşan büyük bir düzen veya stil yeniden hesaplaması varsa başarısız olur.

  • Büyük bir düzen güncellemesi 100'den fazla düzen nesnesi (yaklaşık olarak öğeler) içerir.
  • Büyük bir stil yeniden hesaplaması 300'den fazla öğeyi etkiler.

Başarısızlık durumunda, Performans panelindeki bu analiz, alev grafiğinde bu etkinlikleri vurgular.

Bu etkinliklerin maliyetini azaltmak için:

Yığına özel rehberlik

Bu analiz, aşağıdaki teknolojileri kullanan sayfalar için yığına özel rehberlik de sunar:

Angular

Büyük listeler oluşturuyorsanı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ı artırmak için Effect kancasını kullanıyorsanız yalnızca belirli bağımlılıklar değişene kadar atlama efektleri kullanın.

Ek referanslar