Büyük DOM boyutları etkileşimi nasıl etkiler ve bu konuda yapabilecekleriniz

Bunun bir yolu yok: Bir web sayfası oluşturduğunuzda, o sayfanın bir Belge Nesne Modeli (DOM). DOM, sayfanızın HTML yapısını temsil eder ve bir sayfanın yapısına ve içeriğine JavaScript ve CSS erişimi sağlar.

Ancak sorun şu ki, boyut DOM’un boyutu, bir tarayıcının bir sayfayı hızlı ve verimli bir şekilde oluşturma yeteneğini etkiler. Genel olarak konuşursak, bir DOM ne kadar büyükse, o sayfayı başlangıçta işlemek ve işlemeyi daha sonra sayfa yaşam döngüsünde güncellemek o kadar pahalıdır.

DOM’u değiştiren veya güncelleyen etkileşimler, sayfanın hızlı yanıt verme yeteneğini etkileyen pahalı düzen çalışmalarını tetiklediğinde, bu çok büyük DOM’lara sahip sayfalarda sorunlu hale gelir. Pahalı mizanpaj çalışması, bir sayfanın Sonraki Boyama Etkileşimini (INP) etkileyebilir; Bir sayfanın kullanıcı etkileşimlerine hızlı bir şekilde yanıt vermesini istiyorsanız, DOM boyutlarınızın yalnızca gerektiği kadar büyük olmasını sağlamanız önemlidir.

Bir sayfanın DOM’u ne zaman fazla büyük? #

Lighthouse’a göre, bir sayfanın DOM boyutu, 1.400 düğümü aştığında aşırıdır. Bir sayfanın DOM’u 800 düğümü aştığında Lighthouse uyarı vermeye başlayacak. Örneğin aşağıdaki HTML’yi alın:

ul>
li>List item one.&LT/li>
li>List item two.&LT/li>
li>List item three.&LT/li>
&LT/ul>

Yukarıdaki kodda dört DOM öğesi vardır: &LTul> eleman ve onun üç &LTli> alt öğeler. Web sayfanızda neredeyse kesinlikle bundan çok daha fazla düğüm olacaktır, bu nedenle DOM boyutlarını kontrol altında tutmak için neler yapabileceğinizi ve ayrıca bir sayfanın DOM’unu şu kadar küçük bir boyuta aldıktan sonra işleme işini optimize etmeye yönelik diğer stratejileri anlamak önemlidir. olabilir.

Büyük DOM’lar sayfa performansını nasıl etkiler? #

Büyük DOM’ler sayfa performansını birkaç şekilde etkiler:

1. Sayfanın ilk oluşturulması sırasında. Bir sayfaya CSS uygulandığında, CSS Nesne Modeli (CSSOM) olarak bilinen DOM’a benzer bir yapı oluşturulur. CSS seçicilerin özgüllüğü arttıkça, CSSOM daha karmaşık hale gelir ve web sayfasını ekrana çizmek için gerekli düzen, stil, birleştirme ve boyama işlerini çalıştırmak için daha fazla zamana ihtiyaç duyulur. Bu eklenen iş, sayfa yükleme sırasında erken gerçekleşen etkileşimler için etkileşim gecikmesini artırır.
2. Etkileşimler, öğe ekleme veya silme yoluyla veya DOM içeriklerini ve stillerini değiştirerek DOM’u değiştirdiğinde, bu güncellemeyi oluşturmak için gerekli çalışma çok maliyetli mizanpaj, stil, birleştirme ve boyama işleriyle sonuçlanabilir. Sayfanın ilk oluşturmasında olduğu gibi, bir etkileşimin sonucu olarak HTML öğeleri DOM’a eklendiğinde, CSS seçici özgüllüğündeki bir artış, işleme işine katkıda bulunabilir.
3. JavaScript, DOM’u sorguladığında, DOM öğelerine yapılan başvurular bellekte saklanır. Örneğin, document.querySelectorAll hepsini seçmek için &LTdiv> bir sayfadaki öğeler, sonuç çok sayıda DOM öğesi döndürürse, bellek maliyeti önemli olabilir.

Bunların hepsi etkileşimi etkileyebilir, ancak yukarıdaki listedeki ikinci madde özellikle önemlidir. Bir etkileşim, DOM’da değişiklikle sonuçlanırsa, bir sayfada zayıf bir INP’ye katkıda bulunabilecek birçok işi başlatabilir.

DOM boyutunu nasıl ölçebilirim? #

DOM boyutunu birkaç şekilde ölçebilirsiniz. İlk yöntem Deniz Feneri’ni kullanır. Bir denetim yaptığınızda, mevcut sayfanın DOM’undaki istatistikler, “Teşhis” başlığı altındaki “Aşırı DOM boyutundan kaçının” denetiminde olacaktır. Bu bölümde toplam DOM elemanları sayısını, en çok alt eleman içeren DOM elemanını ve en derin DOM elemanını görebilirsiniz.

Daha basit bir yöntem, herhangi bir büyük tarayıcıda geliştirici araçlarında JavaScript konsolunu kullanmayı içerir. DOM’daki toplam HTML öğesi sayısını almak için, sayfa yüklendikten sonra konsolda aşağıdaki kodu kullanabilirsiniz:

document.querySelectorAll('*').length;

DOM boyutu güncellemesini gerçek zamanlı olarak görmek istiyorsanız, performans izleme aracı. Bu aracı kullanarak, mevcut DOM boyutuyla birlikte düzen ve stil işlemlerini (ve diğer performans özelliklerini) ilişkilendirebilirsiniz.

DOM’un boyutu, Lighthouse DOM boyutunun uyarı eşiğine yaklaşıyorsa veya tamamen başarısız oluyorsa, bir sonraki adım, web sitenizin INP’sinin iyileştirilebilmesi için sayfanızın kullanıcı etkileşimlerine yanıt verme yeteneğini geliştirmek üzere DOM’un boyutunu nasıl azaltacağınızı bulmaktır.

Bir etkileşimden etkilenen DOM öğelerinin sayısını nasıl ölçebilirim? #

Laboratuvarda, sayfanın DOM’sinin boyutuyla ilgili olabileceğinden şüphelendiğiniz yavaş bir etkileşimin profilini çıkarıyorsanız, profil oluşturucuda “Stili Yeniden Hesapla” etiketli herhangi bir etkinlik parçasını seçerek kaç DOM öğesinin etkilendiğini öğrenebilirsiniz. ” ve alt paneldeki bağlamsal verileri gözlemleyin.

Yukarıdaki ekran görüntüsünde, çalışmanın stil yeniden hesaplamasının – seçildiğinde – etkilenen öğelerin sayısını gösterdiğini gözlemleyin. Yukarıdaki ekran görüntüsü, DOM boyutunun çok sayıda DOM öğesinin bulunduğu bir sayfada iş oluşturma üzerindeki etkisinin aşırı bir örneğini gösterse de, bu teşhis bilgisi her durumda, DOM boyutunun ne kadar süreceği konusunda sınırlayıcı bir faktör olup olmadığını belirlemek için yararlıdır. sonraki karenin bir etkileşime yanıt olarak boyanması için.

DOM boyutunu nasıl azaltabilirim? #

Web sitenizin HTML’sini gereksiz biçimlendirme açısından denetlemenin ötesinde, DOM boyutunu küçültmenin temel yolu, DOM derinliğini azaltmaktır. DOM’nizin gereksiz yere derin olabileceğine dair bir işaret, aşağıdakine benzer bir biçimlendirme görüyor olmanızdır. Elementler tarayıcınızın geliştirici araçları sekmesi:

div>
div>
div>
div>
&LT!-- Contents -->
&LT/div>
&LT/div>
&LT/div>
&LT/div>

Bunun gibi kalıpları gördüğünüzde, muhtemelen DOM yapınızı düzleştirerek onları basitleştirebilirsiniz. Bunu yapmak, DOM öğelerinin sayısını azaltacak ve muhtemelen size sayfa stillerini basitleştirme fırsatı verecektir.

DOM derinliği, kullandığınız çerçevelerin bir belirtisi de olabilir. Özellikle, bileşen tabanlı çerçeveler – bunlara dayananlar gibi JSX— birden çok bileşeni bir üst kapsayıcıya yerleştirmenizi gerektirir.

Bununla birlikte, birçok çerçeve, parçalar olarak bilinenleri kullanarak bileşenleri iç içe yerleştirmekten kaçınmanıza izin verir. Bir özellik olarak parçalar sunan bileşen tabanlı çerçeveler aşağıdakileri içerir (ancak bunlarla sınırlı değildir):

Seçtiğiniz çerçevede parçaları kullanarak DOM derinliğini azaltabilirsiniz. Düzleştirme DOM yapısının stil üzerindeki etkisi konusunda endişeleriniz varsa, aşağıdakiler gibi daha modern (ve daha hızlı) düzen modlarını kullanmaktan yararlanabilirsiniz: esnek kutu veya Kafes.

Dikkate alınması gereken diğer stratejiler #

DOM ağacınızı düzleştirmeye ve DOM’unuzu olabildiğince küçük tutmak için gereksiz HTML öğelerini kaldırmaya özen gösterseniz bile, yine de oldukça büyük olabilir ve kullanıcı etkileşimlerine yanıt olarak değiştiği için çok sayıda işleme işini başlatabilir. Kendinizi bu konumda bulursanız, işleme işini sınırlamak için düşünebileceğiniz başka stratejiler de vardır.

Eklemeli bir yaklaşım düşünün #

İlk oluşturulduğunda sayfanızın büyük bölümlerinin başlangıçta kullanıcı tarafından görülemediği bir konumda olabilirsiniz. Bu, başlangıçta DOM’un bu bölümlerini atlayarak HTML’yi tembel yüklemek için bir fırsat olabilir, ancak kullanıcı sayfanın başlangıçta gizli yönlerini gerektiren bölümleriyle etkileşime girdiğinde bunları ekleyin.

Bu yaklaşım hem ilk yükleme sırasında hem de belki sonrasında yararlıdır. İlk sayfa yüklemesi için, başlangıçta daha az işleme işi üstleniyorsunuz, bu da ilk HTML yükünüzün daha hafif olacağı ve daha hızlı oluşturulacağı anlamına geliyor. Bu, kritik dönemdeki etkileşimlere, ana başlığın dikkatini çekmek için daha az rekabetle daha fazla fırsat verecektir.

Sayfanın başlangıçta yükleme sırasında gizlenen birçok bölümü varsa, yeniden oluşturma işini tetikleyen diğer etkileşimleri de hızlandırabilir. Ancak, diğer etkileşimler DOM’a daha fazla katkıda bulunduğundan, sayfa yaşam döngüsü boyunca DOM büyüdükçe işleme işi artacaktır.

DOM’a zamanla ekleme yapmak zor olabilir ve kendi ödünleşimleri vardır. Bu yoldan gidiyorsanız, bir kullanıcı etkileşimine yanıt olarak sayfaya eklemeyi düşündüğünüz HTML’yi doldurmak için veri almak üzere ağ istekleri yapıyor olabilirsiniz. Uçuş sırasındaki ağ istekleri INP’ye dahil edilmese de, algılanan gecikmeyi artırabilir. Mümkünse, kullanıcıların bir şeyler olduğunu anlamaları için verilerin getirildiğini gösteren bir yükleme döndürücü veya başka bir gösterge gösterin.

CSS seçici karmaşıklığını sınırlayın #

Tarayıcı, CSS’nizdeki seçicileri ayrıştırdığında, bu seçicilerin geçerli mizanpaja nasıl uygulanacağını ve uygulanıp uygulanmayacağını anlamak için DOM ağacını kat etmesi gerekir. Bu seçiciler ne kadar karmaşıksa, sayfanın bir etkileşim sonucunda değişmesi durumunda hem sayfanın ilk oluşturulmasını hem de artan stil yeniden hesaplamalarını ve düzen çalışmasını gerçekleştirmek için tarayıcının yapması gereken daha fazla iş vardır.

Kullan content-visibility mülk #

CSS şunları sunar: content-visibility ekran dışı DOM öğelerini tembel bir şekilde işlemenin etkili bir yolu olan özellik. Öğeler görünüme yaklaştıkça talep üzerine oluşturulurlar. faydaları content-visibility yalnızca ilk sayfa oluşturma işleminde önemli miktarda işleme işini kesmeyin, aynı zamanda bir kullanıcı etkileşiminin sonucu olarak sayfa DOM’si değiştiğinde ekran dışı öğeler için oluşturma işini de atlayın.

Çözüm #

DOM boyutunu yalnızca kesinlikle gerekli olan boyuta indirmek, web sitenizin INP’sini optimize etmenin iyi bir yoludur. Bunu yaparak, DOM güncellendiğinde tarayıcının mizanpaj ve işleme işini gerçekleştirmesi için geçen süreyi azaltabilirsiniz. DOM boyutunu anlamlı bir şekilde azaltamasanız bile, işleme işini bir DOM alt ağacına izole etmek için kullanabileceğiniz CSS kapsamı ve content-visibility CSS özelliği.

Nasıl yaparsanız yapın, oluşturma işinin en aza indirildiği bir ortam yaratmanın yanı sıra sayfanızın etkileşimlere yanıt olarak yaptığı işleme miktarını azaltmanın sonucu, web sitenizin kullanıcılarla etkileşime girdiklerinde onlara karşı daha duyarlı hissetmesini sağlayacaktır. . Bu, web siteniz için daha düşük bir INP’ye sahip olacağınız anlamına gelir ve bu da daha iyi bir kullanıcı deneyimi anlamına gelir.

Gönderen kahraman resmi Unsplashile Louis Kamış.