Wie testet man die Leistung von JavaScript-Code?

Question

CPU-Zyklen, Speichernutzung, Ausführungszeit, usw.?

Hinzugefügt: Gibt es eine quantitative Methode zum Testen der Leistung in JavaScript neben der Wahrnehmung, wie schnell der Code läuft?

Answer 1

Profiler sind definitiv eine gute Möglichkeit, um Zahlen zu erhalten, aber meiner Erfahrung nach ist die wahrgenommene Leistung alles, was für den Benutzer/Kunden zählt. Wir hatten zum Beispiel ein Projekt mit einem Ext-Akkordeon, das sich erweiterte, um einige Daten anzuzeigen, und dann ein paar verschachtelte Ext-Gitter. Alles war eigentlich Rendering ziemlich schnell, keine einzelne Operation dauerte eine lange Zeit, es war nur eine Menge von Informationen, die alle auf einmal gerendert, so fühlte es sich langsam für den Benutzer.

Wir haben dies nicht durch den Wechsel zu einer schnelleren Komponente oder die Optimierung einer Methode behoben, sondern indem wir zuerst die Daten und dann die Raster mit einem setTimeout gerendert haben. Die Informationen erschienen also zuerst, und die Raster wurden eine Sekunde später eingeblendet. Insgesamt wurde auf diese Weise etwas mehr Verarbeitungszeit benötigt, aber für den Benutzer wurde die Leistung verbessert.

---

Heutzutage sind der Chrome-Profiler und andere Tools allgemein verfügbar und einfach zu verwenden, ebenso wie die console.time() , console.profile() y performance.now() . Chrome bietet Ihnen auch eine Zeitleistenansicht, aus der Sie ersehen können, was Ihre Framerate beeinträchtigt, wo der Benutzer möglicherweise wartet usw.

Es ist wirklich einfach, die Dokumentation für all diese Tools zu finden, Sie brauchen dafür keine SO-Antwort. 7 Jahre später wiederhole ich immer noch den Ratschlag meiner ursprünglichen Antwort und weise darauf hin, dass man langsamen Code ewig laufen lassen kann, ohne dass der Benutzer es merkt, und ziemlich schnellen Code laufen lassen kann, wo er es merkt, und er wird sich darüber beschweren, dass der ziemlich schnelle Code nicht schnell genug ist. Oder dass Ihre Anfrage an die Server-API 220 ms benötigt. Oder etwas anderes in dieser Art. Der Punkt bleibt, dass Sie, wenn Sie einen Profiler herausnehmen und nach Arbeit suchen, diese auch finden werden, aber es ist vielleicht nicht die Arbeit, die Ihre Benutzer brauchen.

Answer 2

Ich stimme zu, dass die wahrgenommene Leistung wirklich alles ist, was zählt. Aber manchmal möchte ich einfach herausfinden, welche Methode schneller ist. Manchmal ist der Unterschied RIESIG und wissenswert.

Sie könnten einfach Javascript-Timer verwenden. Aber ich erhalte in der Regel viel konsistentere Ergebnisse mit den nativen Chrome (jetzt auch in Firefox und Safari) devTool Methoden console.time() & console.timeEnd()

Ein Beispiel, wie ich es verwende:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Update (4/4/2016):

Chrome canary kürzlich hinzugefügt Profilierung auf Leitungsebene die Registerkarte "Quellen" der Entwicklungswerkzeuge, auf der Sie genau sehen können, wie lange die Ausführung jeder Zeile gedauert hat!

Answer 3

Wir können immer Messung der von einer Funktion benötigten Zeit durch ein einfaches Datumsobjekt .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Answer 4

Versuchen Sie jsPerf . Es ist ein Online-Javascript-Performance-Tool für Benchmarking und den Vergleich von Code-Schnipseln. Ich benutze es die ganze Zeit.

Answer 5

Die meisten Browser implementieren jetzt hochauflösendes Timing in performance.now() . Es ist besser als new Date() für Leistungstests, da sie unabhängig vom Systemtakt arbeitet.

Verwendung

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Referenzen

• [https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/Performance.now())
• http://www.w3.org/TR/hr-time/#dom-performance-now