Wie richtig Devtools Timeline zu verstehen?

Question

Meine Frage bezieht sich auf Chrome DevTools, insbesondere habe ich eine Frage zum Timeline-Tab. Also, wie ich schon oft gelesen habe, muss mein Browser eine Geschwindigkeit von 60 fps haben, um meine Pixel zu rendern. Manchmal, obwohl es einige schwere JS ausführt und verhindert 60fps passiert. Auch wenn ich etwas CSS und JS habe, die eine Neuberechnung und Neubemalung des DOM-Baums (Teil- oder Vollbaum) verursachen, kann es auch mehr als ~ 16 ms für einen Rahmen dauern. Hier ist das Bild eines solchen langen Rahmen unserer App:

Ok, hier kann ich deutlich sehen, dass zwei Anträge so viel Zeit in Anspruch nehmen (192ms + 14ms), kann dieser Browser nicht 60fps malen und es kommt dort nicht einmal nahe.

Obwohl hier ein anderes Bild:

So ist es jetzt viel besser. Jetzt ist es ~ 42fps. Aber jetzt kann ich nicht verstehen, warum ..

Ich habe paar "Update Layer Tree" und "Farbe" Gelegenheiten. Einige Mausereignisse, aber alle sind < = 1ms hier.

Es gibt 12 solcher "Ereignisse" während dieses Rahmens. 10 von ihnen sind sogar weniger als 0.30ms, also wenn ich sie alle summiere, wird es definitiv weniger als 16ms sein (3.57, wenn ich richtig zähle), aber Chrome sagt, dass dieser Frame 23.9ms ist.

Warum Timeline sagt, dass ich hier einen Müll habe? Was soll ich tun, um es los zu werden und zu wissen, wo der Flaschenhals ist?

Ich bin ein bisschen verwirrt hier, weil ich definitiv etwas vermisse, wenn ich die Timeline untersuche. Also bitte, geben Sie mir eine detaillierte Erklärung oder einige detaillierte Anleitungen, wie man solche "Dschunken" los wird und wie man sie erkennt . Obwohl ich schon einige Artikel gelesen haben und fast Udemy Kurs auf die Leistung fertig, ich bin immer noch verwirrt ..

Danke

Answer 1

Ich vermute, dass es „native“ Code in diesem offenen Raum Ausführung ist, dass die Zeitleiste meldet nicht.

Sie können versuchen, die Registerkarte "Profile" in den Entwicklungstools zu verwenden, um stattdessen ein CPU-Profil zu erstellen. Dies zeigt eine Leiste für "(Programm)" an, bei der es sich um nativen Chrome-Code handelt, der ausgeführt wird. Das könnte zumindest ein Anfang sein, um herauszufinden, was passiert.

Timeline zeigt weiße Lücke auf der rechten Seite:

Profiler zeigt, dass (Programm) und eine Garbage Collection "(g ... r)"

es passieren, wenn Es gibt dort einen großen Block von "(Programm)", dann denke ich, dass Sie die Registerkarte chrome: // tracing verwenden können, auf der alle nativen/internen Sachen angezeigt werden: