UI-Blockierungsverhalten: Mikrotasks vs. Makrotasks

Können Sie den Unterschied zwischen den beiden Codeschnipseln unten finden:

function handleClick1() {
     setTimeout(handleClick1, 0);
}

function handleClick2() {
     Promise.resolve().then(handleClick2);
}

Wenn Sie nicht in der Lage sind, die Auswirkungen der Entscheidung für das eine gegenüber dem anderen zu erkennen, wird Ihnen dieser Blogbeitrag etwas Neues beibringen.

Hintergrund

setTimeout dient zum Planen eines Rückrufs nach einer bestimmten Zeitspanne. Promise.resolve().then wird effektiv dasselbe tun, aber intern sind beide unterschiedlich. Letzterer gibt ein Versprechen zurück, das bereits gelöst ist. Durch Aufrufen von then(callback) zu diesem Versprechen wird die Ausführung des Rückrufs geplant.

Die beiden oben genannten Funktionen rufen sich also rekursiv mit minimaler Verzögerung auf. Der Unterschied besteht darin, dass der Rückruf von „setTimeout“ in die Makrotask-Warteschlange gestellt wird und ein Rückruf von „promise.then()“ in die Mikrotask-Warteschlange gestellt wird. Die Art und Weise, wie die Ereignisschleife Elemente aus diesen beiden Warteschlangen behandelt, macht den Unterschied zwischen den beiden oben genannten Codeschnipseln.

Ereignisschleifenbehandlung von Mikrotask vs. Makrotask

Alles, was eine Ereignisschleife tut, ist, solange Aufgaben auszuführen sind, diese auszuführen, dann zu schlafen und auf andere Aufgaben zu warten.

Makroaufgaben (oder einfach Aufgaben) umfassen Funktionen, die für die Arbeit verantwortlich sind, wie zum Beispiel:

1. Parsen
2. Reagieren auf DOM,

unter anderem...

Nach der Ausführung einer aus der Aufgabenwarteschlange ausgewählten Aufgabe führt die Ereignisschleife einen Mikrotask-Prüfpunkt durch. Der Algorithmus dafür ist etwa:

While microtask queue is not empty, pick the oldest task from microtask queue and execute it.

Das bedeutet, dass, wenn eine Mikrotask eine andere Mikrotask in die Warteschlange stellt, diese Aufgabe vor der nächsten Makrotask ausgeführt wird. Und da das Rendern der Benutzeroberfläche eine Makroaufgabe ist, wird sie niemals von der Ereignisschleife ausgeführt.

Hier ist eine Demo für das oben Gesagte: JS Bin-Demo. Es läuft eine unendliche Animation. Wenn wir handleClick1 auslösen, fügen wir etwas Verarbeitung zum Hauptthread hinzu, aber die Animation wird immer noch korrekt gerendert. Wenn wir jedoch handleClick2 auslösen, stoppt die Animation.

Ich habe die Variable totalCount hinzugefügt, damit wir abbrechen können, bevor die Seite abstürzt. Was jedoch auffällt, ist, dass die Benutzeroberfläche nach dem Start der MicroTask-Schleife für einige Zeit nicht mehr reagiert. Denn Aufgaben wie Rendern, Reagieren auf DOM usw. werden erst ausgeführt, wenn die Microtask-Warteschlange leer ist.

Dadurch ist handleClick1 aus dem obigen Codeausschnitt eine sicherere Wahl. Ich hoffe, der Blog hat dazu beigetragen, einen grundlegenden Unterschied zwischen Mikrotasks und Makrotasks zu erklären.

Das obige ist der detaillierte Inhalt vonUI-Blockierungsverhalten: Mikrotasks vs. Makrotasks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!