Javascript-Betriebsmechanismus „Event Loop“

1. Vier Konzepte

1. JavaScript ist Single-Threaded

Single-Threaded bedeutet, dass unser js Code nur synchron von oben nach unten ausgeführt werden kann und nur eine Aufgabe gleichzeitig ausgeführt werden kann. Dies führt dazu, dass einige Aufgaben mit langer Ausführungszeit oder unsicherer Ausführungszeit die normale Ausführung anderer Aufgaben blockieren. Der Grund, warum Event Loop auftritt, besteht darin, dieses Problem zu lösen.

2. Aufgabenwarteschlange

Um das oben erwähnte Warteschlangenproblem zu lösen, wird eine Aufgabenwarteschlange erstellt. Wenn der Browser eine asynchrone Aufgabe mit einem Ergebnis hat, wird diese zur späteren Ausführung der Aufgabenwarteschlange hinzugefügt, und andere Aufgaben werden synchron im Hauptthread ausgeführt.

Hierbei ist zu beachten, dass das Hinzufügen von Aufgaben zur Aufgabenwarteschlange erfolgt, nachdem die asynchrone Aufgabe ein Ergebnis aufweist. Tatsächlich existiert in der Aufgabenwarteschlange die Rückruffunktion der asynchronen Aufgabe.

3. Synchrone Aufgaben und asynchrone Aufgaben

Synchrone Aufgaben in Js-Programmen beziehen sich auf Aufgaben, die im Hauptthread ausgeführt werden, und asynchrone Aufgaben beziehen sich auf Aufgaben, die in die Aufgabenwarteschlange gelangen.

4. Javascript-Ausführungsstapel

Alle synchronen Aufgaben werden auf dem Hauptthread ausgeführt und bilden einen Ausführungsstapel. Wenn die Aufgabe im Hauptthread abgeschlossen ist, wird sie zur Ausführung aus der Aufgabenwarteschlange genommen.

var name = "zhouwei";

setzeTimeout(() => {
    konsole.log(1);
}, 1000);

konsole.log(Name);

Der obige Code wird im Browser wie folgt ausgeführt. Unter dem Code der globalen Ausführungsumgebung des Programms verstehen wir den in einer Hauptfunktion verpackten Code. Der Ausführungsstapel dieses Codes ändert sich wie in der folgenden Abbildung dargestellt:

• Beginnen Sie mit der Ausführung des Codes, schieben Sie die main (globalen Code zur Ausführung in den Stapel) und wenn eine asynchrone Aufgabe auftritt (nach setTimeout “).
• Der Browser übernimmt die asynchrone Aufgabe und fügt das Ergebnis der asynchronen Aufgabe (Rückruffunktion) nach 1 Sekunde zur Aufgabenwarteschlange hinzu.
• Die Synchronisierungsaufgaben im Ausführungsstapel sind abgeschlossen. Zu diesem Zeitpunkt ist die Aufgabenwarteschlange leer (weniger als 1 Sekunde) und der Ausführungsstapel ist ebenfalls leer.
• Nachdem eine asynchrone Aufgabe ein Ergebnis hat, wird sie zuerst in die Aufgabenwarteschlange eingetragen (da es viele asynchrone Aufgaben geben kann).
• Der Ausführungsstapel nimmt die Aufgabe aus der Aufgabenwarteschlange und beginnt mit der synchronen Ausführung.
• Wiederholen Sie Schritt 5.
  

Ereignisschleife

Der Prozess, bei dem der Js-Ausführungsstapel kontinuierlich Aufgaben aus der Aufgabenwarteschlange liest und ausführt, wird als Event Loop

Wir wissen, dass die Aufgabenwarteschlange die Ergebnisse asynchroner Aufgaben speichert. Was sind also asynchrone Aufgaben?

• 1. Veranstaltungen

Es gibt viele Ereignisse in Javascript , bei denen es sich allesamt um asynchrone Aufgaben handelt. Der Browser übernimmt. Wenn ein Ereignis ausgelöst wird, wird der Ereignisrückruf zur Aufgabenwarteschlange hinzugefügt und ausgeführt, wenn sich im Js-Ausführungsstapel keine Aufgabe befindet.

• 2. HTTP-Anfrage
• 3. Zeitgeber
• 4. requestAnimationFrame usw.

macrotask und microtask
Nachdem wir die Aufgabenwarteschlange und Event Loop verstanden haben, wissen wir, dass der Js-Ausführungsstapel Aufgaben zur Ausführung aus der Aufgabenwarteschlange liest, aber wir sind uns über dieses spezifische Projekt nicht im Klaren. Hier stellen wir die Konzepte von Makrotasks und Mikrotasks vor, um uns beim Verständnis der Ereignisschleife zu helfen.

Die asynchronen Task-Rückrufe, die in die Task-Warteschlange gelangen, werden in Makrotasks und Mikrotasks unterteilt. Die Regeln für den Js-Ausführungsstapel zum Ausführen von Makrotasks und Mikrotasks sind in der folgenden Abbildung dargestellt.

Der Js-Ausführungsstapel führt zuerst eine Makroaufgabe aus (globaler Code) -> liest alle Mikroaufgaben aus der Aufgabenwarteschlange -> UI-Rendering (Browser-Rendering-Schnittstelle) -> liest eine Makroaufgabe aus der Aufgabenwarteschlange -> alle Mikroaufgaben -> UI-Rendering -> …

Nach Abschluss jeder Runde von Event Loop (1 Makroaufgabe + alle Mikroaufgaben) beginnt der Browser mit dem Rendern der Benutzeroberfläche (sofern eine Benutzeroberfläche gerendert werden muss, andernfalls wird das UI-Rendering nicht durchgeführt). Nach Abschluss UI rendering beginnt die nächste Runde von Event Loop.

Was sind Makroaufgaben?

• setTimeout
• Intervall festlegen
• setImmediate (Knoten)
• requestAnimationFrame (Browser)
• I/O (Ereignisrückrufe)
• UI-Rendering (Browser-Rendering)
  

Was sind Mikroaufgaben?

• Versprechen
• process.nextTick (Knoten)
• MutationObserver (eine von modernen Browsern bereitgestellte Weboberfläche zum Erkennen von DOM-Änderungen)
  

Problem mit der setTimeout-Verzögerung

Im Allgemeinen ist die Ausführungszeit des Rückrufs in setTimeout im Code größer als die festgelegte Zeit. Dies liegt daran, dass nach Erreichen setTimeout Zeit die Rückruffunktion zwar zur Aufgabenwarteschlange hinzugefügt wird, zu diesem Zeitpunkt jedoch möglicherweise Aufgaben im Js-Ausführungsstapel ausgeführt werden. Dieser Rückruf muss warten, bis die Aufgaben im Js-Ausführungsstapel abgeschlossen sind, bevor er ausgeführt werden kann. Dies ist setTimeout Verzögerungsproblem.

3. Tatsächlicher Kampf

Üben Sie die folgende Codeausgabe:

konsole.log(1);

setzeTimeout(() => {
    konsole.log(2);
    Versprechen.auflösen().dann(() => {
        console.log(3)
    });
});

neues Versprechen(lösen => {
    konsole.log(4);
    setzeTimeout(() => {
        konsole.log(5);
    });
    Entschlossenheit(6)
}).dann(Daten => {
    konsole.log(Daten);
})

setzeTimeout(() => {
    konsole.log(7);
})

konsole.log(8);

Verwenden Sie den oben erwähnten JS-Ausführungsmechanismus, um diese Frage zu analysieren:

1: Führen Sie die synchrone Codeausgabe in der globalen Aufgabe aus:

1
4
8

Hierbei ist zu beachten, dass es sich bei der von Promise akzeptierten handle Funktion um eine synchrone Aufgabe handelt, bei der then Methode hingegen um eine asynchrone Aufgabe, sodass direkt 4 ausgegeben wird.

2: Zu diesem Zeitpunkt befinden sich drei setTimeout Makroaufgaben und eine Promise Mikroaufgabe in der Aufgabenwarteschlange.

// Die Makroaufgabe zu diesem Zeitpunkt ist setTimeout(() => {
    konsole.log(2);
    Versprechen.auflösen().dann(() => {
        console.log(3)
    });
});

setzeTimeout(() => {
    konsole.log(5);
});


setzeTimeout(() => {
    konsole.log(7);
})

// Zu diesem Zeitpunkt ist die Mikrotask dann (Daten => {
    konsole.log(Daten);
})

Führen Sie eine Mikroaufgabe aus, Ausgabe: 6

3: Führen Sie dann die erste Makroaufgabe aus

setzeTimeout(() => {
    konsole.log(2);
    Versprechen.auflösen().dann(() => {
        console.log(3)
    });
});

Ausgabe: 2

In dieser Makrotask wird der Aufgabenwarteschlange eine Mikrotask hinzugefügt. An diesem Punkt enthält die Aufgabenwarteschlange eine neue Mikroaufgabe.

4: Führe eine Mikroaufgabe aus, Ausgabe: 3

dann(() => {
   console.log(3)
});

5: Führen Sie die Aufgabe weiterhin gemäß den Regeln aus. Ausgabe: 5, 7

Die Gesamtausgabe ist:

1, 4, 8, 6, 2, 3, 5, 7

Ist das Ihre Antwort?

Zusammenfassen:

• javascritp -Aufgaben werden in synchrone Aufgaben und asynchrone Aufgaben unterteilt
• Synchrone Aufgaben werden im Hauptthread (Js-Ausführungsstapel) ausgeführt, asynchrone Aufgaben werden von anderen Threads übernommen und nachdem die asynchronen Aufgaben Ergebnisse haben, werden ihre Rückrufe zur Aufgabenwarteschlange hinzugefügt.
• Aufgaben in der Aufgabenwarteschlange werden in Makrotasks und Mikrotasks unterteilt. Der Js-Ausführungsstapel führt immer zuerst eine Makroaufgabe und dann alle Mikroaufgaben aus ...

Dies ist das Ende dieses Artikels über den Ereignisschleifenmechanismus des Javascript Betriebsmechanismus. Weitere relevante Inhalte zum Ereignisschleifenmechanismus des Javascript-Betriebsmechanismus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!