Analyse des Ereignisschleifenmechanismus von js

Vorwort

Wie wir alle wissen, ist JavaScript im Kern ein Single-Thread-System, aber Browser können asynchrone Anfragen sehr gut verarbeiten. Warum ist das so? Das Prinzip dahinter hat viel mit dem Ereignisschleifenmechanismus zu tun.

Bevor wir die Ereignisschleife untersuchen, müssen wir den Ausführungsthread des Browsers verstehen ~~

Der Rendering-Prozess des Browsers ist multithreaded. Jeder Tab im Browser stellt einen unabhängigen Prozess dar. Der Browserkernel ist einer der Multiprozesse des Browsers und hauptsächlich für das Seiten-Rendering, die Skriptausführung, die Ereignisverarbeitung usw. verantwortlich. Die darin enthaltenen Themen sind die folgenden

GUI-Rendering-Thread: verantwortlich für das Rendern von Seiten, das Parsen von HTML und CSS zum Bilden eines DOM-Baums;
JS-Engine-Thread: interpretiert und führt Code, Benutzereingaben und Netzwerkanforderungen aus;
Ereignisverarbeitungsthread: Nachdem Klick-, Maus- und andere interaktive Ereignisse aufgetreten sind, wird die Ereignisfunktion in die Warteschlange gestellt.
Timer löst Thread aus: Nach Ablauf der Zeit wird die Ausführungsfunktion in die Aufgabenwarteschlange geschoben.
HTTP-Netzwerkanforderungsthread: Verarbeitet Get- und Post-Anforderungen des Benutzers und schiebt die zurückgegebenen Ergebnisse in die Aufgabenwarteschlange.

Nachdem Sie den Browser-Rendering-Prozess verstanden haben, müssen Sie auch den Betriebsmechanismus von JS verstehen. Der Betriebsmechanismus von JS ist die Ereignisschleife

Ausführungsstapel

Die Umgebung, in der JS ausgeführt wird, wird als Hostumgebung bezeichnet.

Ausführungsstapel: Aufrufstapel, eine Datenstruktur, die zum Speichern der Ausführungsumgebung verschiedener Funktionen verwendet wird. Bevor jede Funktion ausgeführt wird, werden ihre zugehörigen Informationen zum Ausführungsstapel hinzugefügt. Bevor eine Funktion aufgerufen wird, wird eine Ausführungsumgebung erstellt und dann zum Ausführungsstapel hinzugefügt; nach dem Aufruf einer Funktion wird die Ausführungsumgebung zerstört.

Ereignisschleife

Alle Aufgaben in js können in synchrone und asynchrone Aufgaben unterteilt werden. Synchrone Aufgaben sind Aufgaben, die sofort ausgeführt werden. Synchrone Aufgaben gelangen im Allgemeinen direkt zur Ausführung in den Hauptthread; asynchrone Aufgaben hingegen sind Aufgaben, die asynchron ausgeführt werden, wie z. B. Ajax-Netzwerkanforderungen, SetTimeout-Timing-Funktionen usw., die alle asynchrone Aufgaben sind. Asynchrone Aufgaben werden über den Aufgabenwarteschlangenmechanismus (First-In-First-Out) koordiniert. Synchrone und asynchrone Aufgaben gelangen jeweils in unterschiedliche Ausführungsumgebungen. Synchrone Aufgaben gelangen in den Hauptthread, also den Hauptausführungsstapel, und asynchrone Aufgaben gelangen in die Aufgabenwarteschlange. Wenn die Aufgaben im Hauptthread abgeschlossen und leer sind, wird die Aufgabenwarteschlange gelesen, um die entsprechenden Aufgaben zu lesen und zur Ausführung in den Hauptthread zu verschieben. Diese ständige Wiederholung nennen wir die Ereignisschleife. Der konkrete Vorgang ist in der folgenden Abbildung dargestellt.

In der Ereignisschleife wird jede Schleifenoperation als Tick bezeichnet. Die Schritte jedes Tick-Task-Schlüssels können wie folgt zusammengefasst werden: 1. Führen Sie eine Makroaufgabe aus (wenn sich keine Makroaufgabe im Stapel befindet, holen Sie sie aus der Ereigniswarteschlange); 2. Wenn während der Ausführung eine Mikroaufgabe auftritt, fügen Sie sie der Aufgabenwarteschlange der Mikroaufgabe hinzu; 3. Nachdem die Makroaufgabe ausgeführt wurde, werden alle Mikroaufgaben in der aktuellen Mikroaufgabenwarteschlange sofort (nacheinander) ausgeführt; 4. Nachdem die aktuelle Makroaufgabe ausgeführt wurde, beginnen Sie mit der Überprüfung des Renderings, und dann übernimmt der GUI-Thread das Rendering; 5. Nachdem das Rendering abgeschlossen ist, übernimmt der JS-Thread weiter und startet die nächste Makroaufgabe (holt sie aus der Ereigniswarteschlange).

Zu den Makroaufgaben gehören hauptsächlich: Skript (gesamter Code), setTimeout, setInterval, I/O, UI-Interaktionsereignisse, setImmediate (Node.js-Umgebung)
Zu den Mikrotasks gehören hauptsächlich: Promise, MutaionObserver, process.nextTick (Node.js-Umgebung)

Beispiel für eine Ereignisschleife

console.log('Skriptstart');
//Das gesamte Skript tritt als erste Makroaufgabe in den Hauptthread ein, stößt auf console.log und gibt den Skriptstart aus.
setzeTimeout(Funktion() {
  console.log('Zeitüberschreitung festlegen');
}, 0);
//Wenn setTimeout auftritt, wird seine Rückruffunktion an die Makroaufgabe Event Queue Promise.resolve().then(function() { verteilt.
  Konsole.log('Versprechen1');
}).dann(Funktion() {
  console.log('versprechen2');
});
//Wenn Promise gefunden wird, wird seine then-Funktion der Microtask-Ereigniswarteschlange zugewiesen und als then1 aufgezeichnet. Dann wird eine weitere then-Funktion gefunden und der Microtask-Ereigniswarteschlange zugewiesen und als then2 aufgezeichnet.
console.log('Skriptende');
//Wenn console.log auftritt, geben Sie das Skriptende aus

Auf diese Weise gibt es drei Aufgaben in der Ereigniswarteschlange: Makroaufgabe: setTimeout Mikroaufgaben: then1, then2. Führen Sie zuerst die Mikrotask then1 aus, geben Sie promise1 aus, führen Sie dann then2 aus und geben Sie promise2 aus, damit alle Mikrotasks gelöscht werden

Führen Sie die Aufgabe setTimeout aus und geben Sie setTimeout aus. Bisher lautet die Ausgabereihenfolge: Skriptstart, Skriptende, Promise1, Promise2, setTimeout

Zusammenfassen:

JavaScript ist eine Single-Thread-Sprache. Asynchrone Operationen werden in die Ereignisschleifenwarteschlange gestellt und warten auf die Ausführung durch den Hauptausführungsstapel. Es gibt keinen dedizierten asynchronen Ausführungsthread.

Dies ist das Ende dieses Artikels über den Event-Loop-Mechanismus von js. Weitere relevante Inhalte zum Event-Loop von js finden Sie in den vorherigen Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!