Front-End-JavaScript-Funktionsprinzip

1. Was ist eine JavaScript-Engine?

JavaScript -Engine ist ein Computerprogramm, dessen Hauptfunktion darin besteht, während der Ausführung von JavaScript Quellcode in Maschinencode zu kompilieren.

Jeder größere Webbrowser verfügt über seine eigene JavaScript Engine, die normalerweise vom web -Anbieter entwickelt wird.

• Google Chrome V8。

• Mozilla Firefox Spider Monkey。

• Safari Javascript Core Webkit。

• Edge (Internet Explorer)

Frühere JavaScript Engines wurden hauptsächlich in Webbrowsern verwendet, aber mit dem Aufkommen von nodejs wurde diese Einschränkung aufgehoben.

2. V8-Motor

V8 enthält parser , einen Interpreter ( Ignition ) und einen optimierenden Compiler ( TurboFan ).

Parser: wird zum Generieren eines abstrakten Syntaxbaums verwendet.

Interpreter (Ignition): Wandelt Quellcode in Bytecode um.

Optimierender Compiler ( TurboFan ): führt einige optimierende Kompilierungsoptimierungen durch, wie etwa Inline-Caching.

Nachfolgend wird der allgemeine Arbeitsablauf des V8-Motors beschrieben.

• Zunächst generiert der Parser einen abstrakten Syntaxbaum.
• Der Interpreter generiert dann Bytecode im V8-Format basierend auf dem Syntaxbaum.
• Der optimierende Compiler kompiliert dann den Bytecode in Maschinencode.

3. Laufzeitumgebung

In der Browser-Ausführungsumgebung stellt der Browser Web API wie HTTP-Anfragen, Timer, Ereignisse usw. bereit.

In der Server-Betriebsumgebung stellt nodejs eine API bereit.

Unten sehen Sie die Architektur von JavaScript , wenn es in einem Browser ausgeführt wird. Sie umfasst einen Speicherheap, einen Speicherstapel, eine Ereignisschleife und eine Rückrufwarteschlange.

Stapel
Haufen
Aufrufliste
Rückrufwarteschlange
Ereignisschleife

4. Laufzeitaufrufstapel

Der folgende Code zeigt die Änderungen im Aufrufstapel der JavaScript Ausführung.

Funktion add(x, y) {
    gib x + y zurück;
}

Funktion drucken(x, y) {
    Konsole.log('x+y=',add(x, y))
}

drucken(1, 3)

5. Asynchrone Aufgaben

JavaScript führt zuerst die print aus und ruft dann Web API setTimeout() auf. Web API speichert die Rückruffunktion von setTimeout() und fügt die Rückruffunktion nach 3 Sekunden zur Rückrufwarteschlange hinzu. Die Ereignisschleife stellt fest, dass der Aufrufstapel leer ist, und verschiebt die Rückruffunktion in der Warteschlange zur Ausführung in den Aufrufstapel.

Funktion add(x, y) {
    gib x + y zurück;
}

Funktion drucken(x, y) {
    setzeTimeout(Funktion (){
        Konsole.log('x+y=',add(x, y))
    }, 3000)
}

drucken(1, 3)

6. Zusammenfassung

JavaScript läuft hauptsächlich auf der JavaScript -Engine und der Laufzeitumgebung. Die Engine übersetzt den JS-Quellcode in vom Computer verstandenen Maschinencode und die Laufzeitumgebung stellt einige APIs und Laufzeitimplementierungen für die Kommunikation mit dem zugrunde liegenden Computer bereit.

Dies ist das Ende dieses Artikels über die Funktionsprinzipien von Front-End-JavaScript. Weitere relevante Inhalte zu den Funktionsprinzipien von JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!