Hangi eylemler 'Katman ağacını güncelle'yi tetikler?

Question

Birisi 'Katman ağacını güncelle' eylemini hangi eylemleri tetiklediğimi anlamaya yardımcı olabilir mi? Ve 'katman ağacını güncelle' sayfa yükleme süresinde ne gibi bir etkiye sahiptir?

Answer 1

Ben belirli bir CSS özelliği değiştirirseniz bu soruya cevap verir google mühendisleri (Paul ve Surma) bir çift tarafından oluşturulan bir araçtır" ne iş tarayıcı yapmak zorunda kalacak out https://csstriggers.com/

Kontrol? " Tarayıcı işi üç ana alana (düzen, boya ve kompozit) ayrılmıştır ve bu araç farklı tarayıcılarda hangi CSS özelliklerinin tetiklendiğini belirtir. Webkit ve Gecko tarafından bildirilen bilgilerle ilgili bazı sorunların olduğuna dikkat edin (bkz. GitHub'da this issue), ancak genel olarak bu harika bir kaynaktır.

Bu gibi bir araç, bilgi sağlayıcının kaynağı olmalıdır, çünkü tarayıcı satıcıları her zaman işleri en iyi duruma getirir ve geliştirici, geçmişte okuduğu statik bilgilere her zaman güvenemez.

Bu aracın verilerini nasıl aldığını merak ediyorsanız, source code ürününü ziyaret edebilirsiniz. Çeşitli tarayıcı motorlarına dokunmak için tam otomatik testlerden oluşan bir paket kullanır ve teorik olarak daima güncel olmalıdır.

Bu araç, Google geliştirici savunucuları tarafından önerildiği için, bunun hiç bir zaman bitmeyeceği muhtemel değildir, ancak bu durumda, her zaman yukarıda belirtilen kaynak koddan kendiniz oluşturabilirsiniz.

Düzen (ve katman ağaçları) güncellenirken ne kadar zaman harcanması gerektiği ile ilgili olarak, kolay bir yanıt yoktur. Uygulamanızda sahip olduğunuz DOM öğelerinin sayısı, her bir düzenin ne kadar sürdüğünü etkileyebilir. Ayrıca, düzen bilgilerini tekrar tekrar güncelleyip sorgulayarak "düzen eğimini" tetiklemek de mümkündür. Bu, tarayıcının bu adımda önemli ölçüde daha fazla zaman harcamasına neden olabilir. Belirli bir performans sorunundan endişe ediyorsanız, en iyi yaklaşım, tarayıcı performans araçlarını kullanarak kendi uygulamanızda gerçekte neler olup bittiğini ölçmektir.