Heim  >  Artikel  >  Web-Frontend  >  Erweitertes JavaScript: Erkundung der Ereignisschleife

Erweitertes JavaScript: Erkundung der Ereignisschleife

WBOY
WBOYOriginal
2024-07-20 21:17:52812Durchsuche

Advanced JavaScript: Exploring the Event Loop

Einführung

JavaScript ist eine leistungsstarke und weit verbreitete Programmiersprache in der Webentwicklung. Einer der interessantesten Aspekte ist das Parallelitätsmodell, das es ihm ermöglicht, trotz Single-Threading mehrere Aufgaben effizient zu erledigen. Das Verständnis der Ereignisschleife ist entscheidend für das Schreiben leistungsfähigen und fehlerfreien JavaScript-Codes, insbesondere in komplexen Anwendungen.

Verständnis des Parallelitätsmodells von JavaScript

Single-Threaded-Natur

JavaScript ist Single-Threaded, was bedeutet, dass es Code sequentiell und einen Vorgang nach dem anderen ausführt. Dies steht im Gegensatz zu Sprachen mit mehreren Threads, bei denen mehrere Threads gleichzeitig ausgeführt werden können. JavaScript verwendet jedoch eine ereignisgesteuerte, nicht blockierende Architektur, um Parallelität zu verwalten und asynchrone Aufgaben effizient zu bearbeiten.

Parallelitätsmodell

JavaScript verwendet ein Parallelitätsmodell, das auf einer Ereignisschleife basiert und es ihm ermöglicht, nicht blockierende Vorgänge auszuführen. Dieses Modell ist für die Bearbeitung von Aufgaben wie E/A-Vorgängen, Netzwerkanforderungen und Benutzerinteraktionen unerlässlich, ohne dass die Benutzeroberfläche einfriert.

Die Ereignisschleife erklärt

Was ist die Ereignisschleife?

Die Ereignisschleife ist der Mechanismus, den JavaScript verwendet, um die Ausführung von Code zu koordinieren, Ereignisse zu verarbeiten und asynchrone Aufgaben zu verwalten. Es überprüft kontinuierlich den Aufrufstapel, um festzustellen, ob eine Funktion ausgeführt werden muss, und verarbeitet Aufgaben in der Rückrufwarteschlange, wenn der Stapel leer ist.

Komponenten der Ereignisschleife

1. Stack aufrufen

Der Aufrufstapel verfolgt Funktionsaufrufe. Wenn eine Funktion aufgerufen wird, wird sie dem Stapel hinzugefügt, und wenn sie abgeschlossen ist, wird sie entfernt.

Beispiel:

function greet() {
  console.log('Hello');
}

function sayGoodbye() {
  console.log('Goodbye');
}

greet();
sayGoodbye();
  • Greet() wird aufgerufen und dem Stapel hinzugefügt.
  • console.log("Hallo") wird ausgeführt.
  • Greet() wird vom Stapel entfernt.
  • sayGoodbye() wird aufgerufen und dem Stapel hinzugefügt.
  • console.log("Goodbye") wird ausgeführt.
  • sayGoodbye() wird vom Stapel entfernt.

2. Web-APIs

Web-APIs werden vom Browser (oder Node.js) bereitgestellt und umfassen Funktionen wie setTimeout, DOM-Ereignisse, Abruf usw. Sie werden verwendet, um Aufgaben auszuführen, die außerhalb des Hauptausführungsthreads liegen.

Beispiel:

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 1000);

console.log('End');
  • console.log("Start") wird sofort ausgeführt und protokolliert.
  • setTimeout wird aufgerufen und sein Rückruf wird an die Web-API-Umgebung gesendet.
  • console.log("End") wird sofort ausgeführt und protokolliert.
  • Nach 1 Sekunde wird der Rückruf von setTimeout in die Rückrufwarteschlange verschoben.
  • Sobald der Aufrufstapel leer ist, verschiebt die Ereignisschleife den Rückruf auf den Stapel und console.log("Timeout") wird ausgeführt.

3. Rückrufwarteschlange (Aufgabenwarteschlange)

Die Rückrufwarteschlange enthält Nachrichten mit zu verarbeitenden Rückrufen. Die Ereignisschleife entnimmt Aufgaben aus der Warteschlange und fügt sie dem Aufrufstapel zur Ausführung hinzu, wenn der Stapel leer ist.

4. Mikrotask-Warteschlange

Die Mikrotask-Warteschlange wird für Aufgaben verwendet, die unmittelbar nach Abschluss des aktuellen Vorgangs ausgeführt werden müssen. Hier werden Versprechen und Mutationsbeobachter behandelt.

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

  • console.log("Start") wird ausgeführt und protokolliert.
  • Der setTimeout-Rückruf wird ohne Verzögerung an die Rückrufwarteschlange gesendet.
  • Ein Versprechen wird aufgelöst und sein Rückruf wird zur Mikrotask-Warteschlange hinzugefügt.
  • console.log("End") wird ausgeführt und protokolliert.
  • Die Ereignisschleife verarbeitet die Mikrotask-Warteschlange und protokolliert console.log("Promise").
  • Die Rückrufwarteschlange wird verarbeitet und console.log("Timeout") protokolliert.

Das obige ist der detaillierte Inhalt vonErweitertes JavaScript: Erkundung der Ereignisschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn