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

Interpretation und Verwendung verschiedener React-State-Manager

Zunächst müssen wir wissen, was ein Zustandsmanag...

Tabellen dynamisch in HTML hinzufügen_PowerNode Java Academy

Ohne weitere Umschweife werde ich den Code direkt...

CentOS 7-Methode zum Ändern des Gateways und Konfigurieren des IP-Beispiels

Wählen Sie bei der Installation der CentOS7-Versi...

Detaillierte Erklärung, wie Sie alle untergeordneten Elemente mit CSS auswählen

Wie wähle ich mit CSS rekursiv alle untergeordnet...

So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux

Informationen zur ersten Installation der MySQL-5...

Implementierung der virtuellen React-Liste

Inhaltsverzeichnis 1. Hintergrund 2. Was ist eine...

12 Arten der Komponentenkommunikation in Vue2

Inhaltsverzeichnis 1. Requisiten 2..synchronisier...

So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V

Wenn Sie das Win10-System installiert haben und e...

Häufige Probleme und Lösungen beim Erstellen von MySQL MGR

Inhaltsverzeichnis 01 Häufige Fehler 1 02 Häufige...

So stellen Sie MySQL- und Redis-Dienste mit Docker bereit

Inhaltsverzeichnis So stellen Sie den MySQL-Diens...