Leistungstipps für JavaScript in V8

Chris Wilson
Chris Wilson
X

Einführung

Daniel Clifford hat einen hervorragenden Vortrag auf der Google I/O gehalten, in dem er Tipps und Tricks zur Verbesserung der JavaScript-Leistung in V8 geteilt hat. Daniel ermutigte uns, „schneller zu fordern“ – die Leistungsunterschiede zwischen C++ und JavaScript sorgfältig zu analysieren und Code mit Blick auf die Funktionsweise von JavaScript zu schreiben. In diesem Artikel finden Sie eine Zusammenfassung der wichtigsten Punkte aus Daniels Vortrag. Wir aktualisieren diesen Artikel auch, wenn sich die Leistungsempfehlungen ändern.

Der wichtigste Rat

Es ist wichtig, Leistungstipps in einen Kontext zu setzen. Leistungstipps machen süchtig und manchmal kann es sehr ablenkend sein, sich zuerst auf detaillierte Tipps zu konzentrieren, anstatt sich auf die wirklichen Probleme zu konzentrieren. Sie müssen sich einen ganzheitlichen Überblick über die Leistung Ihrer Webanwendung verschaffen. Bevor Sie sich auf diesen Leistungstipp konzentrieren, sollten Sie Ihren Code mit Tools wie PageSpeed analysieren und Ihren Wert steigern. So können Sie eine vorzeitige Optimierung vermeiden.

Die beste grundlegende Empfehlung für eine gute Leistung in Webanwendungen lautet:

  • Vorbereiten, bevor ein Problem auftritt (oder bemerkt wird)
  • Identifizieren und verstehen Sie dann den Kern Ihres Problems.
  • Beheben Sie schließlich die Probleme, die Ihnen wichtig sind.

Um diese Schritte ausführen zu können, ist es wichtig zu verstehen, wie V8 JavaScript optimiert, damit Sie Code schreiben können, der auf die JS-Laufzeit abgestimmt ist. Es ist auch wichtig, sich über die verfügbaren Tools zu informieren und zu erfahren, wie sie Ihnen helfen können. Daniel erklärt in seinem Vortrag ausführlicher, wie die Entwicklertools verwendet werden. In diesem Dokument werden nur einige der wichtigsten Punkte des V8-Engine-Designs beschrieben.

Jetzt geht es weiter mit den V8-Tipps.

Ausgeblendete Kurse

JavaScript bietet nur begrenzte Informationen zu Typen zur Kompilierungszeit: Typen können zur Laufzeit geändert werden. Daher ist es nicht verwunderlich, dass es teuer ist, zur Kompilierungszeit über JS-Typen nachzudenken. Das könnte Sie dazu bringen, sich zu fragen, wie die JavaScript-Leistung jemals an C++ herankommen könnte. V8 hat jedoch versteckte Typen, die intern für Objekte zur Laufzeit erstellt werden. Objekte mit derselben versteckten Klasse können dann denselben optimierten generierten Code verwenden.

Beispiel:

function Point(x, y) {
  this.x = x;
  this.y = y;
}

var p1 = new Point(11, 22);
var p2 = new Point(33, 44);
// At this point, p1 and p2 have a shared hidden class
p2.z = 55;
// warning! p1 and p2 now have different hidden classes!```

Solange der Objektinstanz p2 kein zusätzliches Mitglied „.z“ hinzugefügt wird, haben p1 und p2 intern dieselbe ausgeblendete Klasse. V8 kann daher eine einzelne Version optimierten Assemblercodes für JavaScript-Code generieren, der entweder p1 oder p2 manipuliert. Je weniger Sie dazu beitragen, dass sich die verborgenen Klassen unterscheiden, desto besser ist die Leistung.

Daher

  • Alle Objektmitglieder in Konstruktorfunktionen initialisieren, damit die Instanz den Typ später nicht ändert
  • Objektmitglieder immer in derselben Reihenfolge initialisieren

iWork Numbers

V8 verwendet Tagging, um Werte effizient darzustellen, wenn sich die Typen ändern können. V8 leitet aus den von Ihnen verwendeten Werten ab, um welchen Zahlentyp es sich handelt. Nachdem V8 diese Inferenz vorgenommen hat, werden Werte mithilfe von Tagging effizient dargestellt, da sich diese Typen dynamisch ändern können. Das Ändern dieser Typ-Tags ist jedoch manchmal mit Kosten verbunden. Daher sollten Sie die Zahlentypen einheitlich verwenden. Im Allgemeinen ist es am besten, nach Bedarf 31-Bit-ganze Zahlen mit Vorzeichen zu verwenden.

Beispiel:

var i = 42;  // this is a 31-bit signed integer
var j = 4.2;  // this is a double-precision floating point number```

Daher

  • Verwenden Sie vorzugsweise numerische Werte, die als 31-Bit-Ganzzahlen mit Vorzeichen dargestellt werden können.

Arrays

Für die Verarbeitung großer und sparser Arrays gibt es intern zwei Arten von Array-Speicher:

  • Fast Elements: linearer Speicher für kompakte Schlüsselsätze
  • Wörterbuchelemente: Andernfalls Hashtabellenspeicher

Es ist am besten, den Array-Speicher nicht von einem Typ in einen anderen umzuwandeln.

Daher

  • Für Arrays fortlaufende Schlüssel mit 0 beginnend verwenden
  • Weisen Sie große Arrays (z. B. mit mehr als 64.000 Elementen) nicht vorab ihre maximale Größe zu, sondern lassen Sie sie nach und nach wachsen.
  • Elemente in Arrays nicht löschen, insbesondere keine numerischen Arrays
  • Laden Sie keine nicht initialisierten oder gelöschten Elemente:
for (var b = 0; b < 10; b++) {
  a[0] |= b;  // Oh no!
}
//vs.
a = new Array();
a[0] = 0;
for (var b = 0; b < 10; b++) {
  a[0] |= b;  // Much better! 2x faster.
}

Außerdem sind Arrays von Doppeln schneller: Die versteckte Klasse des Arrays überwacht die Elementtypen und Arrays, die nur Doppel enthalten, werden entschachtelt (was zu einer Änderung der versteckten Klasse führt).Eine unvorsichtige Manipulation von Arrays kann jedoch aufgrund von Boxing und Unboxing zusätzliche Arbeit verursachen, z.B.

var a = new Array();
a[0] = 77;   // Allocates
a[1] = 88;
a[2] = 0.5;   // Allocates, converts
a[3] = true; // Allocates, converts```

ist weniger effizient als:

var a = [77, 88, 0.5, true];

weil im ersten Beispiel die einzelnen Zuweisungen nacheinander ausgeführt werden und durch die Zuweisung von a[2] das Array in ein Array mit nicht geboxten Double-Werten umgewandelt wird. Durch die Zuweisung von a[3] wird es dann jedoch wieder in ein Array umgewandelt, das beliebige Werte (Zahlen oder Objekte) enthalten kann. Im zweiten Fall kennt der Compiler die Typen aller Elemente im Literal und die ausgeblendete Klasse kann vorab bestimmt werden.

  • Arrays mit fester Größe mit Arrayliteralen initialisieren
  • Kleine Arrays (< 64 kB) vor der Verwendung in der richtigen Größe vorallocaten
  • Speichern Sie keine nicht numerischen Werte (Objekte) in numerischen Arrays.
  • Achten Sie darauf, dass kleine Arrays nicht noch einmal konvertiert werden, wenn Sie sie ohne Literale initialisieren.

JavaScript-Kompilierung

Obwohl JavaScript eine sehr dynamische Sprache ist und die ursprünglichen Implementierungen Interpreter waren, verwenden moderne JavaScript-Laufzeit-Engines die Kompilierung. V8 (die JavaScript-Engine von Chrome) hat zwei verschiedene JIT-Compiler (Just-In-Time):

  • Der „Full“-Compiler, der guten Code für jede JavaScript-Anwendung generieren kann
  • Der Optimierer-Compiler, der für die meisten JavaScript-Programme guten Code generiert, aber länger zum Kompilieren braucht.

Der vollständige Compiler

In V8 wird der Full-Compiler auf allen Code ausgeführt und beginnt so schnell wie möglich mit der Ausführung des Codes. So wird schnell guter, aber nicht hervorragender Code generiert. Dieser Compiler geht bei der Kompilierung fast gar nicht von Typen aus. Er geht davon aus, dass sich die Typen von Variablen bei der Laufzeit ändern können und werden. Der vom Full Compiler generierte Code verwendet Inline-Caches (ICs), um das Wissen über Typen während der Programmausführung zu verfeinern und so die Effizienz im laufenden Betrieb zu verbessern.

Das Ziel von Inline-Caches besteht darin, Typen effizient zu verarbeiten, indem typabhängiger Code für Vorgänge im Cache gespeichert wird. Wenn der Code ausgeführt wird, werden zuerst die Typannahmen validiert und dann der Vorgang mithilfe des Inline-Caches umgangen. Das bedeutet jedoch, dass Vorgänge, die mehrere Typen akzeptieren, weniger leistungsfähig sind.

Daher

  • Die monomorphe Verwendung von Vorgängen wird polymorphen Vorgängen vorgezogen.

Vorgänge sind monomorph, wenn die versteckten Klassen der Eingaben immer gleich sind. Andernfalls sind sie polymorph, d. h., einige der Argumente können bei verschiedenen Aufrufen des Vorgangs den Typ ändern. Der zweite add()-Aufruf in diesem Beispiel führt beispielsweise zu Polymorphismus:

function add(x, y) {
  return x + y;
}

add(1, 2);      // + in add is monomorphic
add("a", "b");  // + in add becomes polymorphic```

Der Optimierungs-Compiler

Parallel zum vollständigen Compiler kompiliert V8 „heiße“ Funktionen (d. h. Funktionen, die häufig ausgeführt werden) mit einem optimierten Compiler neu. Dieser Compiler verwendet Typrückmeldungen, um den kompilierten Code schneller zu machen. Tatsächlich werden die Typen aus den ICs verwendet, über die wir gerade gesprochen haben.

Im optimierenden Compiler werden Vorgänge spekulativ inline eingefügt (direkt dort platziert, wo sie aufgerufen werden). Dies beschleunigt die Ausführung (auf Kosten des Arbeitsspeichers), ermöglicht aber auch andere Optimierungen. Monomorphe Funktionen und Konstruktoren können vollständig inline eingefügt werden. Dies ist ein weiterer Grund, warum der Monomorphismus in V8 eine gute Idee ist.

Mit der eigenständigen „d8“-Version der V8-Engine können Sie protokollieren, was optimiert wird:

d8 --trace-opt primes.js

Dadurch werden die Namen der optimierten Funktionen in stdout protokolliert.

Nicht alle Funktionen können jedoch optimiert werden. Einige Funktionen verhindern, dass der Optimierungs-Compiler für eine bestimmte Funktion ausgeführt wird (ein „Bail-out“). Insbesondere beendet der Optimierungs-Compiler derzeit Funktionen mit try {} catch {}-Blöcken.

Daher

  • Platzieren Sie leistungskritischen Code in einer verschachtelten Funktion, wenn Sie try {} catch {}-Blöcke haben: ```js function perf_sensitive() { // Hier leistungskritische Arbeit ausführen }

try { perf_sensitive() } catch (e) { // Ausnahmen hier behandeln } ```

Diese Empfehlung wird sich wahrscheinlich in Zukunft ändern, da wir Try/Catch-Blöcke im optimierten Compiler aktivieren. Sie können prüfen, wie der optimierte Compiler bei Funktionen abbricht, indem Sie die Option „--trace-opt“ mit d8 wie oben verwenden. Dadurch erhalten Sie weitere Informationen dazu, bei welchen Funktionen ein Abbruch erfolgt:

d8 --trace-opt primes.js

Deoptimierung

Die Optimierung durch diesen Compiler ist spekulativ. Manchmal funktioniert sie nicht und wir kehren zur ursprünglichen Ausführung zurück. Bei der „Deoptimierung“ wird optimierter Code verworfen und die Ausführung wird an der richtigen Stelle im „vollständigen“ Compilercode fortgesetzt. Die Neuoptimierung kann später noch einmal ausgelöst werden, aber kurzfristig wird die Ausführung verlangsamt. Insbesondere Änderungen an den ausgeblendeten Variablenklassen nach der Optimierung der Funktionen führen zu dieser Deoptimierung.

Daher

  • Versteckte Klassenänderungen in Funktionen nach der Optimierung vermeiden

Wie bei anderen Optimierungen können Sie mit einem Logging-Flag ein Protokoll der Funktionen abrufen, die V8 deoptimieren musste:

d8 --trace-deopt primes.js

Andere V8-Tools

Sie können V8-Tracing-Optionen auch beim Starten an Chrome übergeben:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --js-flags="--trace-opt --trace-deopt"```

Zusätzlich zum Profiling mit den Entwicklertools können Sie auch d8 verwenden:

% out/ia32.release/d8 primes.js --prof

Dazu wird der integrierte Stichproben-Profiler verwendet, der alle Millisekunden eine Stichprobe nimmt und v8.log schreibt.

Zusammenfassung

Es ist wichtig, zu verstehen, wie die V8-Engine mit Ihrem Code zusammenarbeitet, um leistungsstarkes JavaScript zu erstellen. Noch einmal:

  • Vorbereiten, bevor ein Problem auftritt (oder bemerkt wird)
  • Identifizieren und verstehen Sie dann den Kern Ihres Problems.
  • Beheben Sie schließlich die Probleme, die Ihnen wichtig sind.

Sie sollten also zuerst mit anderen Tools wie PageSpeed prüfen, ob das Problem in Ihrem JavaScript liegt. Reduzieren Sie es gegebenenfalls auf reines JavaScript (ohne DOM), bevor Sie Messwerte erfassen. Verwenden Sie diese Messwerte dann, um Engpässe zu finden und die wichtigsten zu beseitigen. Wir hoffen, dass Daniel's Vortrag (und dieser Artikel) Ihnen dabei helfen, besser zu verstehen, wie V8 JavaScript ausführt. Konzentrieren Sie sich aber auch darauf, Ihre eigenen Algorithmen zu optimieren.

Verweise