Chrome DevTools frame olay zamanlaması

Bir uygulamanın animasyonları içinde şişe boynunu izole etmek için Chrome kullanıyorum.Chrome DevTools frame olay zamanlaması

Çerçevelerin, çok yavaş olan 20 + ms sürdüğünü gösterir. Ama ne olduğunu görmek için çerçeve expaned, bana 20 + ms alarak jQuery çağrı gösterir, ancak gerçek Recalculate Stil olayı biraz daha fazla 5ms alır.

Bu gecikmeye neyin neden olduğunu nasıl anlarım? Diğer 15ms ne göremiyorum

toplam olay zamanı:

Chrome DevTools showing total time of jQuery function call

jQuery işlevi içinde "yeniden hesapla Style" olay

Chrome DevTools showing split of timing for Recalculate Style event

Yığın "önce Yeniden Hesapla stili "

Chrome DevTools showing stack for Recalculate Style event

kaynak

2013-12-09 Willshaw Media

Toplam 22,93 ms'yi oluşturan diğer iç içe geçmiş etkinlikler, Yeniden Hesaplama Stili olayından hemen sonra listelenmelidir. Örneğin, aşağıda toplam 9ms alan bir Fonksiyon Çağrısı olduğunu görebilirsiniz. Mor sayı, oluşturma süresini gösterir ve sarı sayı, komut yazma süresini gösterir. Eğer pop-up kapatırsanız

Parent event

, ayağa yapan her olay bu çağrı altında detaylı olarak görebilirsiniz.

nested events

kaynak

2013-12-10 20:01:53

Üzgünüm ben yanıtınıza yorum düşündüm. Genişletilmiş olayı göstermek için bir ekran görüntüsü ekledim ve işlev çağrısının yanında görüntülenen tek şey, yeniden hesaplanan stil olayıdır –

İlk ekran görüntüsünden bahsediyor musunuz? Eğer durum buysa, o zaman daha fazla ayrıntı yok. Söz konusu kod, 5. satırda jquery-2.0.3-min.js adresindedir. Ancak, çok yararlı olmayacak bir küçültülmüş sürüm olduğundan. Daha kolay hata ayıklama için geliştirme sırasında sıkıştırılmamış sürüme geçebilirsiniz. –

Ah bu iyi bir nokta. Belki bu yardımcı olacaktır. JQuery işlevinin kendisini çağırması o kadar uzun sürüyor? Bu işlevin ne olduğunu görmek için un-compresssed versiyonunu kullanacağım –

Chrome DevTools frame olay zamanlaması

cevap

İlgili konular