Javascript-Code verstehen und optimieren

Als Front-End-Ingenieur ist jeder mit JavaScript vertraut. Dieser Artikel befasst sich mit einer tieferen Richtung – der JS-Engine, um zu verstehen, wie JavaScript ausgeführt wird, und um sie zu optimieren.

JS-Engine – Einführung in die JS-Engine

1. Grundlegende Einführung

JS-Engine ist ein spezialisiertes JavaScript Interpreter. Sie können einen kurzen Blick auf die aktuellen Mainstream-JS-Engines und Einführungen werfen:

• V8 – Die V8-Engine, die von Google als Open-Source-Version mit C++ bereitgestellt wird, ist auch eine Engine, die wir oft hören

• Rhino – Eine Open-Source-Engine, die vollständig in Java von der Mozilla Foundation verwaltet wird.

• SpiderMonkey – Die JS-Engine der ersten Generation, die einst im Netscape Navigator-Browser lief . Jetzt Firefox

• JavaScriptCore – Safaris Open-Source-JS-Engine

• KJS – KDE-Engine, entwickelt von Harri Porten

• Chakra (JScript9)  – Internet Explorer Engine

• Chakra (JavaScript)  – Microsoft Edge Engine

• JerryScript  – Leichte JS-Engine , hauptsächlich für IOT verwendet

2. Betriebsprozess des V8-Motors

Aufgrund der Beliebtheit von NodeJS und Google Chrome stellen wir hier hauptsächlich den Betriebsmechanismus des V8-Motors vor , wenn Sie an anderen Engines interessiert sind, können Sie es selbst überprüfen.

Wir können sehen, dass der Verarbeitungsprozess der JS-Engine zuerst analysiert wird und konvertieren Der AST-Syntaxbaum wird dann vom Interpreter für zwei Hauptaufgaben verwendet. Die erste besteht darin, ihn in Maschinensprache-Bytecode zu konvertieren, und die zweite besteht darin, ihn zur Optimierung an den Editor (optimierenden Compiler) zu übergeben In der Mitte befindet sich ein Datenanalyseprozess (Profiling-Daten). Der Hauptzweck besteht darin, den Betrieb von JS zu optimieren und dann den optimierten Code in Maschinensprache umzuwandeln.

Die durch V8 verursachten Kernkomponenten sind Zündung bzw. TurboFan

JS-Code – Reden ist billig

Wenn Sie das sehen, werden Sie auf jeden Fall denken: Ich weiß, wofür das ist. Talk ist billig. Gibt es Code, der analysiert werden kann? Schauen Sie sich also bitte den folgenden Beispielcode an. Nach der Analyse des Codes werde ich das Prinzip im Detail vorstellen.

Beispielcode eins:

// first case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 0; i < 9999999; i++) {
    b[i] = 0
}
console.timeEnd()
 
// second case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 10000000; i < 19999999; i++) {
    b[i] = 0
}
console.timeEnd()
 
// third case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 9999999; i < 0; i--) {
    b[i] = 0
}
console.timeEnd()

Nachdem ich den obigen Code gelesen habe, ist der Inhalt sehr gut Einfach: Definieren Sie die Objekte a und b und fügen Sie dann weiterhin Attribute hinzu. Der einzige Unterschied besteht darin, dass im ersten Fall a und b wiederholt dieselben Attribute hinzufügen, im zweiten Fall a und b unterschiedliche Attribute hinzufügen und im zweiten Fall Im dritten Fall fügen a und b wiederholt dieselben Attribute hinzu, Prozess b erfolgt jedoch in umgekehrter Reihenfolge.

Dann stellt sich die Frage: Gibt es einen Unterschied in der Laufgeschwindigkeit der drei Codeteile und ist der Unterschied groß? (Sie müssen die Anzahl der Zyklen nicht überprüfen, es ist alles gleich!)

Hier ist die Antwort: Die benötigte Zeit beträgt etwa 3 (500 ms)

V8 Engine – Hidden Class

Wir wissen, dass js eine dynamische Skriptsprache ist. Was bedeutet das, dass Sie Attribute einfach hinzufügen/entfernen können? Oder ändern Sie seinen Typ. Die meisten JS-Interpreter (Interpreter) verwenden Wörterbuchstrukturen, um die Adressen variabler Attributwerte im Speicher zu speichern. Diese Methode unterscheidet sich von Java und C# (natürlich die dynamischen). Der Typ von C# ist eine andere Sache, hier nicht näher darauf einzugehen.) ist viel weniger effizient, da der Typ von js jederzeit konvertiert werden kann. Die Verwendung der Wörterbuchstruktur in Kombination mit dem festen Typ zur Beurteilung kann dies einfacher machen Finden Sie die Position des variablen Attributwerts, aber es ist schwierig, dies in js zu erreichen.

Daher verwendet der V8-Motor eine hocheffiziente Methode namens Hidden Class. Andere Engines verfügen ebenfalls über ähnliche Methoden, einschließlich Map, Structures, Hidden Class usw. Hier verwenden wir Shape, um es zu definieren, damit es für alle leichter verständlich ist.

Wenn wir ein Objekt definieren, enthält es den folgenden Inhalt:

Die Bedeutung jedes Attributs kann sein Siehe Tabelle oben.

In Kombination mit Shape erstellt die JS-Engine beim Definieren eines Objekts eine Form (kann als kontinuierlicher Cache-Puffer verstanden werden) und ihre Positionen 0 und 1 speichern die x- und y-Werte, wie unten gezeigt :

Wenn ich zwei Objekte definiere, die beide x und y enthalten, dann haben sie eine gemeinsame Form, wie unten gezeigt:

Hier können wir uns also vorstellen, dass alle Objekte eine gemeinsame Form haben, solange wir sie mit denselben Attributen definieren. Wenn wir den Attributwert einer beliebigen Form aufrufen möchten, können wir den Versatz derselben Form verwenden. Kam, um es zu holen.

Was passiert also, wenn wir einem Objekt Attribute hinzufügen? Der V8-Motor erstellt eine neue Form, um die Position basierend auf dem Klassenübergangsprinzip zu markieren, wie unten gezeigt

Mit anderen Worten, wir haben durch die Übergangskette drei Formen erstellt (Übergangskette), um die Rückverfolgbarkeit eines Objekts zu realisieren.

Angesichts dessen muss jeder denken, dass jede zusätzliche Form definitiv einen zusätzlichen Teil des Speichers belegen wird. Zur Optimierung versuche ich, alle Attribute während der Initialisierung zu definieren, Bingo~ Wir können uns auf Folgendes beziehen Abbildung zur Überprüfung:

Durch die obige Erläuterung der Prinzipien glaube ich, dass jeder in der Lage sein wird, den Unterschied in der Ausführungsgeschwindigkeit unseres Beispielcodes abzuleiten und zu erklären.

Erster Fall:

1. Form (leer) für a und b

2. Form 1....9999999 für a

3. Form 1....9999999 für b

A und b haben die gleiche Form und können wiederverwendet werden

Zweiter Fall:

1. Form (leer) für a und b

2. Form 1....9999999 für a

3. Form 10000000....19999999 für b

definiert insgesamt 1 bis 19999999 Form , dann dauert der zweite Fall definitiv doppelt so lange wie der erste Fall

Dritter Fall:

1. Form (leer) für a und b

2. Form 1 ....9999999 für a

3. Form 9999999....1 für b

Quellcode: https://github.com/likeconan/Alipay_Wechat_Integration

Weitere JavaScript-Kenntnisse finden Sie in der Spalte js Special Effects Collection auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonJavascript-Code verstehen und optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!