Wie interpretiere ich die JS Profiling Timeline von Chrome?

Question

Ich habe die Funktionsnamen/Aufrufe in dieser Frage minimiert und anonymisiert (und dementsprechend das Bild retuschiert). Die tatsächlichen Namen und die Anrufstapeltiefe sollten für die Beantwortung dieser Frage keine Rolle spielen.

Ich versuche, einen Engpass in einer Webanwendung mithilfe von Google Chrome-Timeline zu finden. Ich bin mir jedoch nicht sicher, wie ich die nach der Aufnahme einer Timeline angezeigten Daten interpretiere.

Zum Beispiel verwende ich die folgende Funktion:

function obj.a = function (x, y) { 
    console.log('a(' + x + ', ' + y + ')'); 
    return x.getNested().b(y); 
}; 

Nachdem es Profilierung, die Flamme-Chart und das Ereignisprotokoll, als ob console.log und b scheinen wurden von a mehr als einmal aufgerufen. Zum Beispiel sieht das Ereignisprotokoll wie folgt aus:

Andere Anrufungen von a erscheinen (zufällig?) Verfügen sogar über mehr verschachtelte Anrufungen von b und log.

Die offizielle Dokumentation wie How to use the timeline tool nur wenig hilfreich Aussagen wie

bietet Wenn die JS-Profiler aktiviert ist, Ihre Flamme Tabelle zeigt jede JavaScript-Funktion, die aufgerufen wurde.

So wie die JS Profilinformationen angezeigt om der Timeline Panel soll zu lesen und um herauszufinden, interpretiert werden, welche Funktionsaufruf erfordert, wie viel Zeit?

Answer 1

Ich habe ein Beispiel erstellt, in dem wir drei Funktionen ausführen lassen, wobei die letzte, c, die erste in einer Schleife aufruft.

Beispiel:

function a() { 
    console.log("a"); 
} 

function b() { 
    console.log("b"); 
} 

function c() { 
    for (var i = 0; i < 10000; i++) { 
     console.log("c"); 
     a(); 
    } 
} 

a(); 
b(); 
c(); 

Das Ereignisprotokoll wie folgt aussieht:

Sie können die drei Anrufe a, b, c an der Spitze. Die c kann erweitert werden und Sie werden eine Last von a Anrufe sehen, wie Sie erwarten würden. Mein Verständnis für den Grund, warum die c Anrufe mehrmals wiederholt werden, liegt an CPU Unterbrechungen. Der CPU wird ein Stück Zeit gegeben, um das JavaScript auszuführen, sie wird dann unterbrochen und führt einen anderen Job aus und kehrt dann zurück, sodass die Zeitleiste die Wiederaufnahme der Funktion anzeigt, wenn der CPU-Kontext zum JavaScript zurückkehrt.

Der Aufrufbaum Registerkarte Sie sollten für jede Funktion, wie weiter unten auf eine schönere Ansicht der Ausführungszeiten geben:

Answer 2

Dies ist ein Artefakt eines Sampling-Profiler. Der Sampling-Profiler funktioniert folgendermaßen: Er nimmt Programmstack-Samples regelmäßig als Sampling-Intervall (in Chrome sind es entweder 0,1 ms oder 1 ms).

Ein Hauptnachteil des Sampling-Profilers ist, dass er nicht sieht, was mit dem Programm zwischen den Samples passiert. Z.B. Es kann nicht alle Funktionseintritts- und -ausgangsereignisse erkennen. Es ist jedoch gut, eine aggregierte statistische Sicht auf Funktionsausführungszeiten bereitzustellen.

In Ihrem Beispiel wurde wahrscheinlich eine "a" -Funktion zwischen der Entnahme von Samples mit "b" und "log" als oberste Frames beendet.