Sorum, özellikle Chrome DevTools hakkında, özellikle Zaman Çizelgesi sekmesi hakkında sorularım var. Çok sayıda kez okudum, tarayıcımın piksellerimi 60fps hızında oluşturması gerekiyor. Bazen bazı ağır JS yürütme ve 60 fps olmasını engelliyor olsa da. Ayrıca bazı CSS ve JS'lerin DOM ağacının (parça veya tam ağaç) yeniden hesaplanması ve yeniden boyanmasına neden olması durumunda, aynı zamanda bir çerçeve için 16 ms'den daha fazla zaman alabilir. İşte uygulamasından böyle uzun çerçevenin resmidir: Burada açıkça iki istekleri çok zaman aldığını görebilirsiniz,Devtools zaman çizelgesi nasıl doğru şekilde anlaşılır?
Ok (192ms + 14ms), bu tarayıcı 60fps boya olamaz ve oraya bile yaklaşmıyor.
başka resimdir. Şimdi ~ 42fps. Ben "güncelleme katmanı ağaç" ve "boya" vesilelerle çift var neden ..
Ama Şimdi ben anlayamıyorum. Bazı fare olayları, ancak hepsi < = 1ms burada.
Bu çerçevede 12 tane "etkinlik" var. Onlardan 10'u bile daha az 0.30ms'dir, bu yüzden hepsini toplarsam 16ms'den daha az olacaktır (eğer doğru sayılırsa 3.57), fakat Chrome bu çerçevenin 23.9 ms olduğunu söylüyor.
Neden Timeline burada bir çöplük olduğunu söyledi? Bundan kurtulmak için ne yapmalıyım ve darboğazın nerede olduğunu nasıl bilmeliyim?
Burada biraz kafam karıştı, çünkü zaman çizelgesini incelerken kesinlikle bir şey özlüyorum. Bu yüzden, lütfen bana bu tür "kavgalar" dan nasıl kurtulacağına ve nasıl tespit edileceğine dair ayrıntılı bir açıklama veya bazı ayrıntılı eğitimler verin. . Zaten makalelerin çift okumak ve neredeyse performansına Udemy kursu bitirdikten rağmen, hala şaşkınım ..
O açık alanda yürütme "yerli" kod olduğunu sanıyorum size
Cevabınız için teşekkürler! Bu mantıklı, ama bunun neden bir zaman olduğunu ve diğer zamanın neden olmadığını nasıl anlayabilirim? Ve nasıl kurtulmak için? – aprok