Details zu Makrotasks und Mikrotasks in JavaScript

1. Was sind Mikroaufgaben?

Promise

await und async

2. Was sind Makroaufgaben?

setTimeout

setInterval

• DOM -Ereignisse
• AJAX -Anfragen

3. Fall

<Skript>

console.log(1)

setzeTimeout(()=>{

    konsole.log("2")

},0)

Versprechen.lösen().dann(()=>{

    konsole.log('3')

})

console.log(4)

</Skript>

Wir haben festgestellt, dass die Druckreihenfolge 1-4-3-2 ist

Warum ist es in dieser Reihenfolge?

Drucken Sie zuerst 1-4. Es gibt definitiv kein Problem.

Warum wird zuerst 3 und dann 2 gedruckt?

Weil 3 Promise ist Promise eine Mikroaufgabe ist.

2 ist setTimeout , eine Makroaufgabe

Mikrotasks werden früher ausgeführt als Makrotasks.

Also wird zuerst 3 ausgeführt und dann 2

3.1 Fazit

• Erst synchron, dann asynchron; erst Mikro, dann Makro
• Mikrotasks werden früher ausgeführt als Makrotasks.

4. Codebeispiele

<Text>

    <div id="app"></div>

<Skript>

// Dieser Abschnitt ist DOM-Rendering let app=document.getElementById("app")

let cont='<p>Ich bin ein p-Tag</p>'

app.anhängen(Forts.)

// DOM-Rendering wird beendet console.log(1)

setzeTimeout(()=>{

    konsole.log("2")

    Alarm('setTimeout2')

},0)

Versprechen.lösen().dann(()=>{

    konsole.log('3')

    Alarm('3')

})

console.log(4)

</Skript>

</body>

4.1 Code-Analyse

Ausführungsanalyse des obigen Codes:

Sie müssen zuerst 1-4 ausführen.

Dann nach der Mikroaufgabe zuerst und dann der Makroaufgabe

Es gibt 3 aus und dann erscheint 3

Dann heißt es Ausgabe 2 und es erscheint setTimeout2 [falsch]

Weil es ein DOM -Rendering zwischen Mikrotasks und Makrotasks gibt

Dann kommt dom -Rendering und schließlich die Makroaufgabe

Nach der Ausgabe 1-4 wird DOM Rendering durchgeführt.

Dann wird output 2 und dann setTimeout2 angezeigt

4.2 Fazit und Anwendungsszenarien

Microtask>DOM-Rendering>Macrotask Siehe das folgende Beispiel

Anwendungsszenarien dieser Schlussfolgerung

Wir haben alle schon E-Charts erstellt. Wir wissen, wie man E-Charts rendert.

Der Knoten kann erst gerendert werden, nachdem das DOM der Seite gerendert wurde.

Daher platzieren einige Freunde den Anforderungszeitpunkt im überwachten ()-Lebenszyklus

Dadurch wird sichergestellt, dass die zurückgegebenen Daten normal auf der Seite wiedergegeben werden können.

Tatsächlich basierend auf der obigen Schlussfolgerung.

Sie können Daten im Erstellungsprozess anfordern. Als ich zurückkam.

Der DOM wird definitiv gerendert. Weil es sich bei der Anfrage um eine Makroaufgabe handelt.

Die Ausführungszeit der Makroaufgabe erfolgt nach dem DOM-Rendering.

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