Erzwungene Sortierung der Javascript-Ereignisschleife

js Single-Threaded

js ist Single-Threaded, was der Benutzerinteraktion und DOM-Operationen förderlicher ist. Für eine detaillierte Erklärung von Prozessen und Threads können Sie auf das Portal klicken Multithreading ist im Wesentlichen auch Single-Threading. Die vom Webworker erstellten Threads werden vom Hauptthread gesteuert und können nur Berechnungen durchführen

js-Synchronisation und asynchrone

Synchrone Ausführung: Das heißt, der js-Hauptthread führt Aufgaben nacheinander aus. Wenn Sie WebAPI/Ajax und andere Codes ausführen, warten Sie auf die Antwort und der nachfolgende Code wird nicht ausgeführt. Das heißt, die nächste Aufgabe muss warten, bis die vorherige Aufgabe ausgeführt wird abgeschlossen;

Asynchrone Ausführung: js ist Single-Threaded und kann nicht ausgeführt werden, aber der Browser kann, wenn js ausgeführt wird, auf webAPI stoßen Der Wert wird sofort zurückgegeben, um den Hauptthread nicht zu blockieren. Der eigentliche asynchrone Vorgang wird vom Browser ausgeführt und nach Abschluss besprochen. Die Rückruffunktion wird in die Nachrichtenwarteschlange des js-Hauptthreads verschoben wartet auf den Aufruf des Hauptthreads;

Ereignisschleifenmechanismus [Ereignisschleife]

Wenn js ausgeführt wird, verfügt sein Hauptthread über einen Ausführungsstapel [persönliche Gewohnheit wird als Aufrufstapel bezeichnet] (Stack ) und eine Nachrichtenwarteschlange [auch Aufgabenwarteschlange oder Ereigniswarteschlange genannt] (Ereigniswarteschlange); wenn js während der Ausführung auf eine Funktion stößt, wird diese auf den Stapel verschoben und nach Ausführung der Funktion aus dem Stapel und aus der Hauptwarteschlange entfernt Thread-Aufrufe Führen Sie den Stapel aus und führen Sie ihn aus. Wenn sich keine Aufgabe im Ausführungsstapel befindet, fragt der Hauptthread die Nachrichtenwarteschlange ab Zur Ausführung in den Stapel geschoben, bis der Ausführungsstapel leer ist und die Nachricht erneut abgefragt wird, um eine Schleife zu bilden, ist dies die berühmte Ereignisschleife [Ereignisschleife], da die asynchrone Ausführung vom Browser abgeschlossen wird Um zu verstehen, warum DOM-Ereignisse nach der Wiederherstellung des Threads nacheinander ausgeführt werden, wenn der JS-Thread blockiert ist, wird die Aufgabenwarteschlange vom Browser verschoben und der JS-Thread wird blockiert == Der Browser-Thread ist blockiert! Mit anderen Worten, selbst wenn der Hauptthread blockiert ist, wird die Aufgabe nicht daran gehindert, in die Aufgabenwarteschlange verschoben zu werden.]

Ein weiterer Code :

　　　　　　// 主线程执行fn1任务  1function fn1(){ 
                console.log("任务1执行")// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理 2  // 浏览器收到后 0 毫秒将回调函数推入消息列队; 异步执行setTimeout(function(){// 查询到一个回调任务 入栈执行    5console.log("回调1执行")// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理  6  // 浏览器收到后 500   毫秒将回调函数推入消息列队; 异步执行setTimeout(function(){// 查询到一个回调任务 入栈执行    7console.log("回调2执行")
                    },500)
                },0)
            }// 主线程执行fn2任务 3function fn2(){console.log("任务2执行")}// 执行栈没有可执行任务 开始查询消息列队 4

Makrotasks und Mikrotasks

Nachrichtenwarteschlangen werden in zwei Typen unterteilt, nämlich Makrotasks[Task Queue] und Microtasks[Microtasks Queue]; 🎜>

• Makrotasks

  : , , setTimeout, I/O, UI-RenderingsetIntervalsetImmediate

• Mikrotasks

  : , , process.nextTickPromisesObject.MutationObserver

Da stellt sich die Frage: Wer sollte es zuerst ausführen?

In der Promise/A+-Spezifikation heißt es:

Hier bedeutet „Plattformcode“ Engine, Umgebung und Promise-Implementierungscode. In der Praxis stellt diese Anforderung sicher, dass onFulfilled und onRejected asynchron ausgeführt werden. nach der Ereignisschleife, in der then aufgerufen wird, und mit einem neuen Stack

Dies kann entweder mit einem „Makrotask“-Mechanismus wie setTimeout oder setImmediate oder mit einem „Mikrotask“-Mechanismus wie „setTimeout“ oder „setImmediate“ implementiert werden MutationObserver oder process.nextTick

Da die Promise-Implementierung als Plattformcode betrachtet wird, kann sie selbst eine Aufgabenplanungswarteschlange oder „Trampolin“ enthalten, in der die Handler aufgerufen werden.In der Tat der Ausführungsprozess ist auch leicht zu verstehen. Basierend auf der vorherigen Abfrage werden bei der Abfrage der Nachrichtenwarteschlange zunächst

Mikrotasks und dann

Makrotasks abgefragt 🎜>Microtasks-Aufgabe beim Ausführen von Makrotasks. Der nächste Schritt besteht darin, zuerst die Microtasks-Warteschlangenaufgabe abzufragen und dann Makrotasks abzufragen wird wiederholt, bis die Nachrichtenwarteschlange [zwei Warteschlangen] keine Aufgaben mehr hat Ok, unser vorheriger Code [die Promise-Funktion ist es6, daher wird die Knotenumgebung verwendet]

Der obige Codeausführungsprozess:

js führt Konsole 1 aus. Wenn setTimeout auftritt, wird es in eine asynchrone Ausführung geändert, und wenn setTimeout erneut auftritt, wird es erneut asynchron ausgeführt. Dann trifft die Ausführung auf a Versprechen und wird zur Ausführung in die Aufgabenwarteschlange vom Typ Mikrotasks verschoben. Zu diesem Zeitpunkt ist der Ausführungsstapel leer und die Nachrichtenwarteschlange wird zunächst abgefragt Aufgabe, die ausgeführt werden kann. Dann wird die Aufgabe zur Ausführung in den Stapel verschoben und entsprechend gedruckt. [Solange gefunden wird, werden Mikroaufgaben ausgeführt, bis sie leer sind ]; Fragen Sie die Nachrichtenwarteschlange erneut ab. Die Mikrotasks-Warteschlange hat dann keine auszuführenden Aufgaben. Suchen Sie dann nach einem setTimeout-Rückruf, der auf die Ausführung wartet und holen Sie es heraus, fragen Sie die Warteschlange erneut ab. Zu diesem Zeitpunkt sind noch keine Aufgaben in der Makrotasks-Warteschlange vorhanden, und Sie finden einen setTimeou-Rückruf, der auf die Ausführung wartet Bei der Ausführung wird festgestellt, dass das Versprechen in die Mikrotasks verschoben wird. Die Warteschlange wird aus dem Stapel entfernt und der Ausführungsstapel ist wieder leer. Fragen Sie die Nachrichtenwarteschlange ab und stellen Sie fest, dass Mikrotasks ausgeführt werden können. Die Druckantwort 8 9 10 ist nun beendet und der Hauptthread befindet sich im Wartezustand >

Das obige ist der detaillierte Inhalt vonErzwungene Sortierung der Javascript-Ereignisschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!