Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen Mikrotask-Warteschlange und Rückrufwarteschlange in asynchronem JavaScript?

Was ist der Unterschied zwischen Mikrotask-Warteschlange und Rückrufwarteschlange in asynchronem JavaScript?

PHPznach vorne: 2023-08-24 09:33:02557Durchsuche

异步 JavaScript 中微任务队列和回调队列有什么区别？

In asynchronem JavaScript gibt es zwei Möglichkeiten, Aufgaben zu planen: Microtask Queue und Callback Queue. Die JavaScript-Engine behandelt diese beiden Warteschlangen unterschiedlich.

Microtask Queue

Microtask Queue ist eine Aufgabenwarteschlange, die nach der aktuellen Aufgabe ausgeführt wird. Die Mikrotask-Warteschlange wird von der JavaScript-Engine verarbeitet, bevor zur nächsten Aufgabe in der Rückrufwarteschlange übergegangen wird.

Beispiel

Hier ist ein Beispiel für die Funktionsweise der Mikrotask-Warteschlange -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      Promise.resolve().then(function() {
         console.log(&#39;promise resolve&#39;);
      });
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

Im obigen Beispiel wird der Rückruf „setTimeout“ zur Rückrufwarteschlange hinzugefügt. „Promise.resolve“ wird zur Mikrotask-Warteschlange hinzugefügt. Die JavaScript-Engine führt zunächst alle Aufgaben in der Mikrotask-Warteschlange aus, bevor sie in die Rückrufwarteschlange gelangt.

Die Ausgabe des obigen Codes lautet also (in der Konsole) -

start
end
promise resolve
setTimeout

Callback Queue

Callback Queue ist eine Warteschlange von Aufgaben, die nach der aktuellen Aufgabe ausgeführt werden. Die Rückrufwarteschlangewird von der JavaScript-Engine verarbeitet, nachdem alle Aufgaben in der Mikrotask-Warteschlange ausgeführt wurden.

Beispiel

Hier ist ein Beispiel dafür, wie die Rückrufwarteschlange funktioniert –

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

Im obigen Beispiel wird der Rückruf ‘setTimeout‘ zur Rückrufwarteschlange hinzugefügt. Die JavaScript-Engine führt den Rückruf „setTimeout“ aus, nachdem der gesamte Code in der aktuellen Aufgabe ausgeführt wurde.

Die Ausgabe des obigen Codes lautet also (in der Konsole) -

start
end
setTimeout

Unterschied zwischen Mikrotask-Warteschlange und Rückrufwarteschlange

Mikrotask-Warteschlange und Rückrufwarteschlange sind:

Mikrotask

Die Die Warteschlange wird von der JavaScript-Engine verarbeitet, bevor zur nächsten Aufgabe in der Rückrufwarteschlange übergegangen wird.

RückrufeDie Warteschlange wird von der JavaScript-Engine verarbeitet, nachdem alle Aufgaben in der Mikrotask-Warteschlange ausgeführt wurden.

Microtask

Warteschlangenverarbeitung nach Abschluss der aktuellen Aufgabe.

CallbackQueue wird verarbeitet, nachdem die Mikrotask-Warteschlange leer ist.

Mikrotasks

Warteschlangen werden in separaten Ereignisschleifen verarbeitet.

RückrufeWarteschlange werden in derselben Ereignisschleife verarbeitet.

Vorteile der Microtask-Warteschlange

Einige Vorteile der Microtask-Warteschlange gegenüber der Rückrufwarteschlange sind:

Die Microtask-Warteschlange wird in einer separaten Ereignisschleife verarbeitet. Das heißt, wenn der Hauptthread blockiert ist, bleibt die Microtask-Warteschlange bestehen

Die Mikrotask-Warteschlange wird verarbeitet, nachdem die aktuelle Aufgabe abgeschlossen ist. Das bedeutet, dass jeder Code, der von der aktuellen Aufgabe abhängt, zur Mikrotask-Warteschlange hinzugefügt und verarbeitet werden kann. Wird unmittelbar nach Abschluss der aktuellen Aufgabe ausgeführt.
Die Mikrotask-Warteschlange hat eine höhere Priorität als die Rückrufwarteschlange, was bedeutet, dass die Mikrotask-Warteschlange zuerst ausgeführt wird, wenn beide Warteschlangen gleichzeitig ausgeführt werden sollen.
Vorteile der Rückrufwarteschlange

Einer der Vorteile der Rückrufwarteschlange gegenüber der Mikrotask-Warteschlange besteht darin, dass die Rückrufwarteschlange in derselben Ereignisschleife wie der Hauptthread verarbeitet wird. Dies bedeutet, dass die Rückrufwarteschlange nicht verarbeitet wird, wenn der Hauptthread blockiert ist.

Fazit

In diesem Tutorial haben wir uns den Unterschied zwischen Mikrotask-Warteschlangen und Callback-Warteschlangen in asynchronem JavaScript angesehen. Wir haben uns auch die Vorzüge jeder Kohorte angesehen.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Mikrotask-Warteschlange und Rückrufwarteschlange in asynchronem JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 循环 class 线程主线程事件 promise 异步 ul

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich eine ID mit Mongoose in Javascript?Nächster Artikel：Wie erstelle ich eine ID mit Mongoose in Javascript?

In Verbindung stehende Artikel

Mehr sehen