Erläuterung von JavaScript-Mikrotasks und Makrotasks

Erläuterung von JavaScript-Mikrotasks und Makrotasks

Vorwort:

js ist eine Single-Thread-Sprache, daher ist es unmöglich, dass es asynchron ist. Die Hostumgebung von js (wie Browser, Knoten) ist jedoch multithreaded. Die Hostumgebung sorgt dafür, dass js in gewisser Weise asynchrone Eigenschaften hat (ereignisgesteuert). In js unterteilen wir alle Aufgaben im Allgemeinen in zwei Kategorien: synchrone Aufgaben und asynchrone Aufgaben. Unter den asynchronen Aufgaben gibt es noch feinere Unterteilungen, nämlich Mikrotasks und Makrotasks.

1. Konzept

1.1 Makroaufgaben

Makroaufgaben ---- setTimeout , setInterval , DOM Ereignisse, AJAX Anfragen

Um sicherzustellen, dass die internen JS-Aufgaben und DOM Aufgaben der Reihe nach ausgeführt werden können, rendert der Browser die Seite erneut, nachdem eine task abgeschlossen ist und bevor die nächste Aufgabe gestartet wird (Aufgabe->Render->Aufgabe->…).

1.2 Mikroaufgaben

Mikrotasks ---- Promise , async / await

Bei Mikrotasks handelt es sich im Allgemeinen um Aufgaben, die unmittelbar nach Abschluss der aktuellen synchronen Aufgabe ausgeführt werden müssen, z. B. das Bereitstellen von Feedback zu einer Reihe von Aktionen, oder um Aufgaben, die asynchron ausgeführt werden müssen, ohne dass eine neue Aufgabe zugewiesen werden muss, wodurch der Leistungsaufwand verringert werden kann.

2. Ausführungsauftrag

Schauen wir uns zunächst einen Codeabschnitt an und besprechen dann die Ausführungsreihenfolge:

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


Das vom obigen Code ausgegebene Ergebnis ist 1 4 3 2. Aus dem obigen Code können wir schließen, dass ihre Ausführungsreihenfolge ist:

Führen Sie zuerst den synchronen Code aus. Wenn Sie auf eine asynchrone Makroaufgabe stoßen, fügen Sie die asynchrone Makroaufgabe in die Makroaufgabenwarteschlange ein. Wenn Sie auf eine asynchrone Mikroaufgabe stoßen, fügen Sie die asynchrone Mikroaufgabe in die Mikroaufgabenliste ein. Wenn alle synchronen Codes ausgeführt wurden, übertragen Sie die asynchrone Mikroaufgabe aus der Liste zur Ausführung an den Hauptthread. Nachdem die asynchrone Mikroaufgabe ausgeführt wurde, übertragen Sie die asynchrone Makroaufgabe aus der Warteschlange zur Ausführung an den Hauptthread. Der Zyklus wird fortgesetzt, bis alle Aufgaben ausgeführt wurden.

Hinweis: Mikrotasks werden vor dem Seitenrendering ausgeführt.

3. Aufgabenbeziehung

Makroaufgaben sind der Mainstream. Wenn js ausgeführt wird, wird eine Makroaufgabe gestartet. In der Makroaufgabe werden Anweisungen nacheinander ausgeführt. Es können mehrere Makroaufgaben gleichzeitig vorhanden sein, sie werden jedoch nacheinander nacheinander ausgeführt.

Auf jede Makrotask kann eine Mikrotask-Warteschlange folgen. Wenn sich in der Mikrotask-Warteschlange Anweisungen oder Methoden befinden, werden diese zuerst ausgeführt. Wenn nicht, beginnen Sie mit der Ausführung der nächsten Makroaufgabe, bis alle Makroaufgaben abgeschlossen sind.

4. Aufgabendetails

Warum gibt es nach Makrotasks noch Mikrotasks? Das liegt daran, dass Makrotasks zu viel Leistung beanspruchen. Wenn einige zuvor vorbereitete Methoden benötigt werden und zuletzt ausgeführt werden und Sie keine neue Makrotask hinzufügen möchten, können Sie diese Methoden nacheinander in die Mikrotask-Warteschlange stellen. Nachdem der Code in dieser Makrotask ausgeführt wurde, wird die Mikrotask-Warteschlange ausgeführt.

Wenn daher der aktuelle synchrone Code ausgeführt wird und eine asynchrone Aufgabe auftritt, wird sie, wenn es sich um eine asynchrone Makroaufgabe handelt, in die nächste Runde der Makroaufgabenwarteschlange gestellt; wenn es sich um eine asynchrone Mikroaufgabe handelt, wird sie in die Mikroaufgabenwarteschlange gestellt und folgt der aktuellen Makroaufgabe. Eine Mikrotask entspricht dem kleinen Ende einer Makrotask. Wenn also die aktuelle Makrotask ausgeführt wird, wird die dahinter wartende asynchrone Mikrotask sofort in die Warteschlange gestellt, um weiter ausgeführt zu werden. Die asynchrone Makrotask muss bis zur nächsten Runde warten, was dazu führt, dass die asynchrone Mikrotask vor der Makrotask ausgeführt wird.

Dies ist das Ende dieses Artikels über JavaScript -Mikrotasks und -Makrotasks. Weitere relevante JavaScript Mikrotasks und -Makrotasks finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Details zu Makrotasks und Mikrotasks in JavaScript
  • Eine kurze Diskussion über Makrotasks und Mikrotasks in js
  • JavaScript-Makrotasks und Mikrotasks
  • Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript-Makrotasks und Mikrotasks
  • Eine kurze Diskussion über die Prinzipien von JavaScript-Ereignisschleifen-Mikrotasks und Makrotask-Warteschlangen
  • Analyse der JavaScript-Ereignisschleife sowie der Prinzipien von Makro- und Mikro-Tasks
  • JS-Ereignisschleifenmechanismus Ereignisschleifen-Makrotask-Mikrotask-Prinzipanalyse

<<:  Eine kurze Diskussion über die Rolle leerer HTML-Links

>>:  Interpretation und Analyse von HTTP-Header-Informationen (detaillierte Zusammenfassung)

Artikel empfehlen

Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)

Inhaltsverzeichnis Grundlegende Anweisungen und V...

js, um einfache Lupeneffekte zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Reines CSS3 zur Erzielung einer Mouseover-Schaltflächenanimation, Teil 2

Haben Sie nach den letzten beiden Kapiteln ein ne...

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

Rendern Definieren Sie das Skelett, schreiben Sie...

Detaillierte Erklärung der allgemeinen For-Schleife in JavaScript-Anweisungen

Es gibt viele Schleifenanweisungen in JavaScript,...

JavaScript-Canvas zum Erzielen von Meteoreffekten

In diesem Artikel wird der spezifische Code für J...

Detaillierte Erklärung der gemischten Vererbung in Vue

Inhaltsverzeichnis Die Auswirkungen der gemischte...

JavaScript-Canvas zum Erzielen eines Regentropfeneffekts

In diesem Artikelbeispiel wird der spezifische Co...

Vier Möglichkeiten zum Vergleichen von JavaScript-Objekten

Inhaltsverzeichnis Vorwort Referenzvergleich Manu...

mysql 8.0.19 winx64.zip Installations-Tutorial

Dieser Artikel zeichnet das Installationstutorial...

Einführung in den HTML-Standard für chinesische Zeichenkodierung

In HTML müssen Sie die von der Webseite verwendet...