webentwicklung-frage-antwort-db.com.de

So profilieren und erhalten Sie Javascript-Leistung

Mögliches Duplizieren:
Wie kann man die Ausführung von Javascript am besten profilieren?

Ich habe ein paar Skripte, die jQuery verwenden, und ich glaube, ich habe einen Speicherverlust in einem von ihnen.

Wie kann man ein Profil erstellen und feststellen, welche Teile der Skripte den meisten Speicher/die meiste CPU verbrauchen?

26
Eli

Bezüglich des Speicherverbrauchs

Speicherverluste in JavaScript werden normalerweise ignoriert, es sei denn, sie führen zu Speicherverlusten im Browser (das heißt, auch wenn der Benutzer von der Seite weg navigiert, wird der Speicher weiterhin zugewiesen und kann nicht freigegeben werden). Der Grund dafür ist, dass Ihre Webanwendung möglicherweise einige Speicherlecks aufweist, die Benutzer jedoch von einer Seite zur nächsten wechseln, um die Lecks zu minimieren. Möglicherweise wird der Browser jedoch nicht neu gestartet, sodass es zu schwerwiegenden Speicherverlusten kommen kann. Es ist bekannt, dass JavaScript-Code in bestimmten Browsern zu Speicherverlusten führt. Dies ist wahrscheinlich der schlimmste in diesem Bereich. Möglicherweise finden Sie Microsoft JavaScript Memory Leak Detector sehr nützlich.

Bezüglich der Zeiten

IE, Chrome und Safari haben in den Webentwicklungstools, die im Lieferumfang des Browsers enthalten sind, Profiler integriert. Für Firefox können Sie Firebug verwenden. Dies kann auch nützlich sein, da Sie jQuery verwenden, was bedeutet, dass Ihr Profiling-Bericht mit anonymen Funktionen gefüllt ist, was es ziemlich unlesbar macht, John Resigs jQuery-Profiling-Plugin , wodurch Sie eine klarere Ausgabe erhalten Die Sache.

20
Miguel Ventura

Verwenden Sie Firebug . Um aus http://getfirebug.com/js.html zu zitieren:

Um den Profiler zu verwenden, gehen Sie einfach zur Registerkarte "Konsole" und klicken Sie auf die Schaltfläche "Profil". Dann benutze deine App für ein bisschen oder lade die Seite neu und klicke dann erneut auf den "Profil" -Button. Anschließend wird ein detaillierter Bericht angezeigt, in dem angegeben ist, welche Funktionen aufgerufen wurden und wie viel Zeit sie jeweils in Anspruch genommen haben.

10
msanders

Ich würde vorschlagen, einen Blick auf den Profiler in Firebug und das Drip Plugin für IE zu werfen, um nach Speicherlecks zu suchen.

Denken Sie auch daran, dass die meisten JavaScript-Speicherverluste auf Zirkelverweise zwischen DOM-Objekten und JavaScript-Objekten zurückzuführen sind, die beim Entladen des DOM-Objekts nicht beschädigt werden. Um dies zu verhindern, würde ich empfehlen, in den DOM-Objekteigenschaften keine Verweise auf JavaScript-Objekte zu erstellen (z. B. document.getElementById('foo').bar = myObject; vermeiden). Wenn Sie diese Zirkelverweise erstellen müssen, müssen Sie sicherstellen, dass Sie sie in einer Funktion aufteilen, die beim Entladen der Seite oder beim Entfernen der DOM-Objekte vor dem Entladen ausgeführt wird.

4
pkaeding

Google Chrome verfügt auch über Profiloptionen

2
Vestel

Obwohl Chrome Profiling-Optionen eingebaut hat, gibt es keine genauen Informationen über das Objekt. Also bevorzuge ich die Verwendung des Leak-Finder-for-Javascript-Tools, das mir in meinem Code geholfen hat.

https://code.google.com/p/leak-Finder-for-javascript/

Ich hoffe das hilft.

1
sid

Eine andere einfache Möglichkeit, einen bestimmten Code zu testen, ist das Hinzufügen eines Timers.

var testStart = new Date();

// code to be tested here

$('#jstest').html("selected function: "+ (new Date() - testStart) + " milliseconds");

Wobei jstest ein span-Element ist, das irgendwo auf Ihrer Seite sichtbar ist.

1
macca1

Firebug oder Google Page Speed ​​für Firefox verfügen über Profilerstellungstools.

0
Eimantas

Dieser Beitrag von John Resig (jQuery) kann hilfreich sein, um Speicherlecks im IE zu erkennen:

http://ejohn.org/blog/deep-tracing-of-internet-Explorer/

0
David Murdoch