Wie testen Sie die Leistung von JavaScript-Code?

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

Hinzugefügt: Gibt es eine quantitative Möglichkeit, die Leistung in JavaScript zu testen, außer nur die Wahrnehmung, wie schnell der Code ausgeführt wird?

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. Zum Beispiel hatten wir ein Projekt mit einem Ext-Akkordeon, das erweitert wurde, um einige Daten und dann einige verschachtelte Ext-Gitter anzuzeigen. Alles wurde tatsächlich ziemlich schnell gerendert, kein einzelner Vorgang dauerte lange, es wurden nur viele Informationen gleichzeitig gerendert, sodass 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 und dann die Gitter mit einem setTimeout gerendert haben. Die Informationen erschienen also zuerst, und die Gitter wurden eine Sekunde später eingefügt. Insgesamt dauerte dies etwas länger, aber für den Benutzer wurde die wahrgenommene Leistung verbessert.

In diesen Tagen, die Chrome - Profiler und andere Werkzeuge sind allgemein verfügbar und einfach zu bedienen, wie sind console.time(), console.profile()und performance.now(). Chrome bietet Ihnen auch eine Zeitleistenansicht, die Ihnen zeigen kann, was Ihre Framerate beeinträchtigt, wo der Benutzer möglicherweise wartet usw.

Das Finden von Dokumentation für all diese Tools ist wirklich einfach, dafür benötigen Sie keine SO-Antwort. 7 Jahre später werde ich immer noch den Rat meiner ursprünglichen Antwort wiederholen und darauf hinweisen, dass langsamer Code für immer ausgeführt werden kann, wenn ein Benutzer ihn nicht bemerkt, und ziemlich schneller Code, der dort ausgeführt wird, wo er es tut, und er wird sich über das beschweren ziemlich schneller Code, der nicht schnell genug ist. Oder dass Ihre Anfrage an Ihre Server-API 220 ms gedauert hat. Oder so etwas anderes. Der Punkt bleibt, dass Sie einen Profiler herausnehmen und nach Arbeit suchen, die Sie erledigen müssen, aber möglicherweise nicht die Arbeit, die Ihre Benutzer benötigen.

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

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

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

Update (04.04.2016):

Chrome Canary hat kürzlich ein Line Level Profiling auf der Registerkarte "Quellen" der Entwicklertools hinzugefügt , auf der Sie genau sehen können, wie lange die Ausführung jeder Zeile gedauert hat!

Wir können die von jeder Funktion benötigte Zeit immer anhand eines einfachen Datumsobjekts messen .

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

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

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.

Verwendungszweck

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Verweise

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

JSLitmus ist ein leichtes Tool zum Erstellen von Ad-hoc-JavaScript-Benchmark-Tests

Lassen Sie uns die Leistung zwischen function expressionund untersuchen function constructor:

<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 eine gleiche Operation zu erstellen function expressionund function constructorauszuführen. Das Ergebnis ist wie folgt:

FireFox-Leistungsergebnis

IE-Leistungsergebnis

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

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

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

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 im getesteten Browser herausfinden, welche Technik besser ist.

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

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");
}

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

Schnelle Antwort

In jQuery (genauer gesagt in Sizzle) verwenden wir dies (Checkout-Master und Open Speed ​​/ Index.html in Ihrem Browser), das wiederum Benchmark.js verwendet . Dies wird zum Leistungstest der Bibliothek verwendet.

Lange Antwort

Wenn der Leser den Unterschied zwischen Benchmark, Arbeitslast und Profilern nicht kennt, lesen Sie zuerst einige Grundlagen zu Leistungstests im Abschnitt "readme 1st" von spec.org . Dies ist für Systemtests gedacht, aber das Verständnis dieser Grundlagen hilft auch beim JS-Perfektionstest. Einige Highlights:

Was ist ein Benchmark?

Ein Benchmark ist "ein Standard für Messung oder Bewertung" (Webster's II Dictionary). Ein Computer-Benchmark ist normalerweise ein Computerprogramm, das eine genau definierte Reihe von Operationen ausführt - eine Arbeitslast - und eine Form von Ergebnis - eine Metrik - zurückgibt, die die Leistung des getesteten Computers beschreibt. Computer-Benchmark-Metriken messen normalerweise die Geschwindigkeit: Wie schnell wurde die Arbeitslast 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?

Im Idealfall ist der beste Vergleichstest für Systeme Ihre eigene Anwendung mit Ihrer eigenen Arbeitslast. Leider ist es oft 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 Sicherstellung 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 den Zusammenhang zwischen Ihren Anwendungs- / Computeranforderungen und den Anforderungen verstehen Benchmark misst. Entsprechen die Benchmarks den Arten von Anwendungen, die Sie ausführen? Haben die Workloads ähnliche Eigenschaften? Anhand Ihrer Antworten auf diese Fragen können Sie erkennen, 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.

Leistungstests JS

Im Idealfall besteht der beste Leistungstest darin, Ihre eigene Anwendung mit Ihrer eigenen Arbeitslast zu verwenden und zu wechseln, was Sie zum Testen benötigen: verschiedene Bibliotheken, Maschinen usw.

Wenn dies nicht möglich ist (und normalerweise nicht). Der erste wichtige Schritt: Definieren Sie Ihre Arbeitslast. Es sollte die Arbeitslast Ihrer Anwendung widerspiegeln. In diesem Gespräch spricht Vyacheslav Egorov über beschissene Workloads, die Sie vermeiden sollten.

Dann können 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 systemische Leistung der Bibliothek auswirken.

Wenn etwas wirklich schlecht funktioniert, müssen Sie als Nächstes nach Engpässen suchen.

Wie finde ich Engpässe? Profiler

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

Ich finde die Ausführungszeit die beste Maßnahme.

Sie könnten console.profile in firebug verwenden

Normalerweise teste ich nur die Javascript-Leistung, wie lange das Skript ausgeführt wird. jQuery Lover hat einen guten Artikel-Link zum Testen der Leistung von Javascript-Code bereitgestellt. Der Artikel zeigt jedoch nur, 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 .

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

UX Profiler nähert sich diesem Problem aus Anwendersicht. Es gruppiert alle Browserereignisse, Netzwerkaktivitäten usw., die durch eine Benutzeraktion (Klick) verursacht wurden, und berücksichtigt alle Aspekte wie Latenz, Zeitüberschreitungen usw.

Ich sah ähnlich aus, fand es aber.

https://jsbench.me/

Es ermöglicht einen Vergleich von Seite zu Seite und Sie können dann auch die Ergebnisse teilen.

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

Leistungstests wurden in letzter Zeit zu einem Modewort, aber das heißt nicht, dass Leistungstests kein wichtiger Prozess in der Qualitätssicherung oder sogar nach dem Versand des Produkts sind. Und während ich die App entwickle, verwende ich viele verschiedene Tools, von denen einige oben erwähnt wurden, wie der Chrome Profiler. Normalerweise schaue ich mir ein SaaS oder eine OpenSource an, die ich in Betrieb nehmen und vergessen kann, bis ich die Warnung bekomme, dass etwas schief gelaufen ist .

Es gibt viele großartige Tools, mit denen Sie die Leistung im Auge behalten können, ohne dass Sie durch die Rahmen springen müssen, um einige grundlegende Warnungen einzurichten. Hier sind einige, die es meiner Meinung nach wert sind, selbst überprüft zu werden.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

Um ein klareres Bild zu zeichnen, finden Sie hier ein kleines Tutorial zum Einrichten der Überwachung für eine Reaktionsanwendung.

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