it-swarm.com.de

Wie testest du JavaScript-Code?

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

Hinzugefügt: Gibt es eine quantitative Möglichkeit, die Leistung in JavaScript zu testen, abgesehen davon, wie schnell der Code ausgeführt wird?

303
danmine

Profiler sind definitiv ein guter Weg, um Zahlen zu erhalten, aber meiner Erfahrung nach ist die wahrgenommene Leistung alles, was für den Benutzer/Kunden wichtig ist. Wir hatten zum Beispiel ein Projekt mit einem Ext-Akkordeon, das erweitert wurde, um einige Daten und dann einige verschachtelte Ext-Gitter anzuzeigen. Tatsächlich lief alles ziemlich schnell, keine einzelne Operation dauerte lange, es wurden nur viele Informationen auf einmal gerendert, so dass es sich für den Benutzer langsam anfühlte.

Wir haben dies 'behoben', indem wir nicht zu einer schnelleren Komponente gewechselt oder eine Methode optimiert haben, sondern indem wir zuerst die Daten gerendert haben und dann die Gitter mit einem setTimeout gerendert haben. Die Informationen erschienen also zuerst, und eine Sekunde später platzierten sich die Gitter. Insgesamt hat es etwas mehr Verarbeitungszeit gekostet, aber für den Benutzer wurde die wahrgenommene Leistung verbessert.


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

Es ist wirklich einfach, Dokumentation für all diese Tools zu finden. Sie benötigen hierfür keine SO Antwort. 7 Jahre später wiederhole ich immer noch den Rat meiner ursprünglichen Antwort und weise darauf hin, dass langsamer Code für immer ausgeführt werden kann, wenn ein Benutzer dies nicht bemerkt, und ziemlich schneller Code ausgeführt wird, wenn er dies tut Ziemlich schneller Code, der nicht schnell genug ist. Oder dass Ihre Anfrage an Ihre Server-API 220 ms gedauert hat. Oder so ähnlich. Der Punkt bleibt, dass, wenn Sie einen Profiler herausnehmen und nach Arbeit suchen, Sie sie finden, aber es ist möglicherweise nicht die Arbeit, die Ihre Benutzer benötigen.

301
noah

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

Sie könnten einfach Javascript-Timer verwenden. Normalerweise erhalte ich jedoch mit den systemeigenen devTool-Methoden console.time() & console.timeEnd() Chrome (jetzt auch in Firefox und Safari) konsistentere Ergebnisse.

Beispiel wie ich es benutze:

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')

Results Look like this

Update (04.04.2016):

Chrome canary kürzlich hinzugefügt Line Level Profiling die Registerkarte dev tools sources, auf der Sie genau sehen können, wie lange jede Zeile für die Ausführung benötigt hat! enter image description here

182
Jose Browne

Wir können immer messen Sie die Zeit, die jede Funktion benötigt, mit einem einfachen Datumsobjekt.

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

Versuchen Sie jsPerf . Es ist ein Online-JavaScript-Leistungstool zum Benchmarking und Vergleichen von Codeausschnitten. Ich benutze es die ganze Zeit.

58
Relax

Die meisten Browser implementieren jetzt hochauflösendes Timing in performance.now(). Es ist new Date() für Leistungstests überlegen, da es unabhängig von der Systemuhr arbeitet.

Verwendung

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Referenzen

35
Daniel Imms

JSLitmus ist ein einfaches Tool zum Erstellen von Ad-hoc-JavaScript-Benchmarktests

Lassen Sie uns die Leistung zwischen function expression Und function constructor Untersuchen:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

Was ich oben getan habe, ist das Erstellen eines function expression Und eines function constructor, Die denselben Vorgang ausführen. Das Ergebnis ist wie folgt:

Ergebnis der Firefox-Leistung

FireFox Performance Result

IE-Leistungsergebnis

IE Performance Result

30
Ramiz Uddin

Einige Leute schlagen spezielle Plug-Ins und/oder Browser vor. Ich würde nicht, weil sie nur wirklich nützlich für diese eine Plattform sind; Ein Testlauf unter Firefox wird nicht korrekt in IE7 übersetzt. Wenn man bedenkt, dass 99,999999% der Websites von mehr als einem Browser besucht werden, Sie müssen die Leistung auf allen gängigen Plattformen überprüfen.

Mein Vorschlag wäre, dies in der JS beizubehalten. Erstellen Sie eine Benchmarking-Seite mit all Ihren JS-Tests und planen Sie die Ausführung. Sie können sogar die Ergebnisse von AJAX an Sie zurücksenden lassen, um sie vollständig automatisiert zu halten.

Dann einfach abspülen und über verschiedene Plattformen wiederholen.

16
Oli

Ich habe ein kleines Tool, mit dem ich schnell kleine Testfälle im Browser ausführen und sofort die Ergebnisse erhalten kann:

JavaScript-Geschwindigkeitstest

Sie können mit Code spielen und herausfinden, welche Technik im getesteten Browser besser ist.

11
DUzun

Ich denke, dass das Testen der JavaScript-Leistung (Zeit) völlig ausreicht. Ich fand einen sehr praktischen Artikel über JavaScript-Leistungstests hier .

9
jQuery Lover

Hier ist eine einfache Funktion, die die Ausführungszeit einer übergebenen Funktion anzeigt:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}
7
Bunz

Sie könnten dies verwenden: http://getfirebug.com/js.html . Es hat einen Profiler für JavaScript.

7
John Boker

Schnelle Antwort

In jQuery (genauer gesagt in Sizzle) verwenden wir this (checkout master und open speed/index.html in Ihrem Browser), das wiederum benchmark.js verwendet. Dies wird verwendet, um die Leistung der Bibliothek zu testen.

Lange Antwort

Wenn der Leser den Unterschied zwischen Benchmark, Workload und Profilern nicht kennt, lesen Sie zunächst einige Grundlagen zu Leistungstests im Abschnitt "readme 1st" in spec.org . Dies ist für Systemtests gedacht, aber wenn Sie diese Grundlagen verstehen, können Sie auch JS-Leistungstests durchführen. Einige Höhepunkte:

Was ist ein Benchmark?

Ein Benchmark ist "ein Maßstab für die Messung oder Bewertung" (Webster's II Dictionary). Ein Computer-Benchmark ist in der Regel ein Computerprogramm, das eine genau definierte Reihe von Vorgängen ausführt - eine Arbeitslast - und eine Art Ergebnis zurückgibt - eine Metrik, die die Leistung des getesteten Computers beschreibt. Computer-Benchmark-Metriken messen normalerweise die Geschwindigkeit: Wie schnell war die Workload abgeschlossen? oder Durchsatz: Wie viele Workload-Einheiten pro Zeiteinheit wurden abgeschlossen? Wenn Sie denselben Computer-Benchmark auf mehreren Computern ausführen, können Sie einen Vergleich durchführen.

Soll ich meine eigene Anwendung bewerten?

Idealerweise ist der beste Vergleichstest für Systeme Ihre eigene Anwendung mit Ihrer eigenen Arbeitslast. Leider ist es oftmals unpraktisch, eine breite Basis zuverlässiger, wiederholbarer und vergleichbarer Messungen für verschiedene Systeme mit Ihrer eigenen Anwendung und Ihrer eigenen Arbeitslast zu erhalten. Zu den Problemen können die Erstellung eines guten Testfalls, Bedenken hinsichtlich der Vertraulichkeit, Schwierigkeiten bei der Gewährleistung vergleichbarer Bedingungen, Zeit, Geld oder andere Einschränkungen gehören.

Wenn nicht meine eigene Bewerbung, was dann?

Möglicherweise möchten Sie standardisierte Benchmarks als Referenzpunkt verwenden. Im Idealfall ist ein standardisierter Benchmark portabel und wurde möglicherweise bereits auf den Plattformen ausgeführt, an denen Sie interessiert sind. Bevor Sie jedoch die Ergebnisse berücksichtigen, müssen Sie sicherstellen, dass Sie die Korrelation zwischen Ihren Anwendungs-/Computeranforderungen und den Anforderungen verstehen Benchmark misst. Entsprechen die Benchmarks den von Ihnen ausgeführten Anwendungen? Haben die Workloads ähnliche Eigenschaften? Anhand Ihrer Antworten auf diese Fragen können Sie abschätzen, wie sich der Benchmark Ihrer Realität annähert.

Hinweis: Ein standardisierter Benchmark kann als Referenzpunkt dienen. Bei der Auswahl von Anbietern oder Produkten behauptet SPEC jedoch nicht, dass ein standardisierter Benchmark das Benchmarking Ihrer eigenen tatsächlichen Anwendung ersetzen kann.

Leistungstest JS

Im Idealfall besteht der beste Leistungstest darin, Ihre eigene Anwendung mit Ihrer eigenen Arbeitslast zu verwenden und zu wechseln, was Sie testen müssen: verschiedene Bibliotheken, Computer usw.

Wenn dies nicht möglich ist (und normalerweise auch nicht). Der erste wichtige Schritt: Definieren Sie Ihre Arbeitslast. Es sollte die Arbeitslast Ihrer Anwendung widerspiegeln. In dieser Vortrag spricht Wjatscheslaw Egorow über beschissene Arbeitsbelastungen, die Sie vermeiden sollten.

Dann könnten Sie Tools wie benchmark.js verwenden, um Metriken zu erfassen, normalerweise Geschwindigkeit oder Durchsatz. Bei Sizzle möchten wir vergleichen, wie sich Korrekturen oder Änderungen auf die Systemleistung der Bibliothek auswirken.

Wenn etwas wirklich schlecht läuft, müssen Sie im nächsten Schritt nach Engpässen suchen.

Wie finde ich Engpässe? Profiler

Was ist der beste Weg, um die Ausführung von Javascript zu profilieren?

4
Rafael Xavier

Ich halte die Ausführungszeit für das beste Maß.

3
pdavis

Sie könnten console.profile in firebug verwenden

3
Willem de Wit

X Profiler geht dieses Problem aus Benutzersicht an. Es gruppiert alle Browserereignisse, Netzwerkaktivitäten usw., die durch eine Benutzeraktion (Klicken) verursacht wurden, und berücksichtigt alle Aspekte wie Latenz, Zeitüberschreitungen usw.

1

Hier ist eine wiederverwendbare Klasse für die Zeitleistung. Beispiel ist im Code enthalten:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output
1
Shawn Dotey

Ich teste normalerweise nur die Leistung von Javascript, wie lange das Skript läuft. jQuery Lover hat einen guten Artikellink zum Testen der Leistung von JavaScript-Code angegeben. In diesem Artikel wird jedoch nur gezeigt, wie Sie testen können, wie lange Ihr JavaScript-Code ausgeführt wird. Ich würde auch empfehlen, den Artikel "5 Tipps zur Verbesserung Ihres jQuery-Codes bei der Arbeit mit großen Datenmengen" zu lesen.

1
Uzbekjon

Die goldene Regel ist, unter KEINEN Umständen den Browser Ihres Benutzers zu sperren. Danach schaue ich normalerweise auf die Ausführungszeit, gefolgt von der Speichernutzung (es sei denn, Sie machen etwas Verrücktes, in welchem ​​Fall es eine höhere Priorität haben könnte).

0
William Keller

Dies ist eine gute Möglichkeit, Leistungsinformationen für den jeweiligen Vorgang zu erfassen.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);
0
user2601995