Chrome DevTools event event timing

Używam Chrome do izolowania szyi butelki w animacjach aplikacji.Chrome DevTools event event timing

Pokazuje, że ramki zajmują około 20 + ms, czyli zbyt wolno. Ale kiedy rozszerzyłem ramkę, aby zobaczyć, co się dzieje, pokazuje mi to wywołanie jQuery z 20 + ms, ale rzeczywiste zdarzenie Recalculate Style zajmuje niewiele ponad 5 ms.

Jak mogę się dowiedzieć, co powoduje opóźnienie? Nie mogę zobaczyć, co inni 15ms są

Całkowity czas zdarzenia:

Chrome DevTools showing total time of jQuery function call

W "Przelicz Style" wydarzenie wewnątrz funkcji jQuery

Chrome DevTools showing split of timing for Recalculate Style event

Stos przed " Ponownie oblicz styl "

Chrome DevTools showing stack for Recalculate Style event

Źródło

2013-12-09 Willshaw Media

Pozostałe zdarzenia zagnieżdżone, które składają się na 22,93ms powinny być wymienione tuż po zdarzeniu ponownego obliczenia. Na przykład poniżej widać, że istnieje wywołanie funkcji, które trwa łącznie 9 ms. Fioletowa liczba pokazuje czas renderowania, a żółta liczba pokazuje czas skryptowania.

Parent event

Jeśli odrzucić popup, można zobaczyć, że każde zdarzenie, które stanowi, że wezwanie jest szczegółowo poniżej.

nested events

Źródło

2013-12-10 20:01:53

Niestety myślałem, że skomentował odpowiedź. Dodałem zrzut ekranu, aby pokazać rozszerzone wydarzenie, a jedyną rzeczą pokazaną po stronie wywołania funkcji jest ponowne obliczenie zdarzenia stylu –

Czy odnosisz się do pierwszego zrzutu ekranu? Jeśli tak, to nie ma już więcej szczegółów. Kwestionowany kod znajduje się pod adresem jquery-2.0.3-min.js w linii 5. Jednakże, ponieważ jest to wersja zminifikowana, nie będzie bardzo pomocna. Możesz przejść do wersji nieskompresowanej podczas programowania, aby ułatwić debugowanie. –

Ach, to dobrze. Może to pomoże. Czy to możliwe, że sama funkcja jQuery zajmuje tyle czasu? Użyję wersji nie skompresowanej, żeby zobaczyć, jaka to funkcja. –

Chrome DevTools event event timing

Odpowiedz

Powiązane problemy