Chrome DevTools Frame Event Timing

Ich verwende Chrome, um den Flaschenhals in den Animationen einer App zu isolieren.Chrome DevTools Frame Event Timing

Es zeigt, dass Frames etwa 20 + ms dauern, was zu langsam ist. Aber als ich den Rahmen vergrößert habe, um zu sehen, was hineingeht, zeigt er mir einen jQuery-Aufruf, der 20 + ms dauert, aber das eigentliche Recalculate Style-Ereignis dauert etwas mehr als 5 ms.

Wie kann ich herausfinden, was diese Verzögerung verursacht? Ich kann nicht sehen, was die anderen 15ms ist

Die Gesamtereigniszeit:

Chrome DevTools showing total time of jQuery function call

Das "Neu berechnen Style" Ereignis in der jQuery-Funktion

Chrome DevTools showing split of timing for Recalculate Style event

Stapel vor " Neu berechnen Stil "

Chrome DevTools showing stack for Recalculate Style event

Quelle

2013-12-09 Willshaw Media

Die anderen verschachtelten Ereignisse, die insgesamt 22,93 ms ausmachen, sollten direkt nach dem Ereignis "Neu berechnen" aufgelistet werden. Zum Beispiel können Sie unten sehen, dass es einen Funktionsaufruf gibt, der insgesamt 9ms dauert. Die violette Zahl zeigt die Renderzeit an und die gelbe Nummer zeigt die Scriptzeit.

Parent event

Wenn Sie das Popup schließen, können Sie sehen, dass jedes Ereignis, das dieser Anruf macht wird darunter detailliert beschrieben.

nested events

Quelle

2013-12-10 20:01:53

Entschuldigung, ich dachte, ich hätte Ihre Antwort kommentiert. Ich habe einen Screenshot hinzugefügt, um das erweiterte Ereignis anzuzeigen, und das einzige, was in der Seite des Funktionsaufrufs angezeigt wird, ist das neu berechnete Styl-Ereignis. –

Beziehen Sie sich auf den ersten Screenshot? Wenn das der Fall ist, dann gibt es kein Detail mehr. Der Code in Frage ist bei jquery-2.0.3-min.js bei Zeile 5. Da es jedoch eine verkleinerte Version ist, wird nicht sehr hilfreich sein. Sie können während der Entwicklung in die unkomprimierte Version wechseln, um das Debuggen zu vereinfachen. –

Ah, das ist ein guter Punkt. Vielleicht wird das helfen. Ist es dann möglich, dass der Aufruf der jQuery-Funktion selbst so lange dauert? Ich werde die nicht komprimierte Version verwenden, um zu sehen, was diese Funktion ist –

Chrome DevTools Frame Event Timing

Antwort

Verwandte Themen