JavaScript のマクロタスクとマイクロタスクの詳細

1. マイクロタスクとは何ですか?

Promise

awaitとasync

2. マクロタスクとは何ですか?

setTimeout

setInterval

• DOMイベント
• AJAXリクエスト

3. 事例

<スクリプト>

コンソール.log(1)

タイムアウトを設定します(()=>{

    コンソールログ("2")

},0)

Promise.resolve().then(()=>{

    コンソールログ('3')

})

コンソール.log(4)

</スクリプト>

印刷の順序は1-4-3-2であることがわかりました

なぜこの順番になっているのでしょうか？

まず1-4を印刷してください。間違いなく問題ありません。

なぜ最初に 3 が印刷され、次に 2 が印刷されるのですか?

なぜなら、 3 はPromiseであり、 Promiseはマイクロタスクだからです。

2はマクロタスクであるsetTimeoutです

マイクロタスクはマクロタスクよりも早く実行されます。

3が最初に実行され、次に2が実行されます

3.1 結論

• 最初に同期、次に非同期、最初にミクロ、次にマクロ
• マイクロタスクはマクロタスクよりも早く実行されます。

4. コード例

<本文>

    <div id="アプリ"></div>

<スクリプト>

// このセクションはDOMレンダリングです。let app=document.getElementById("app")

let cont='<p>私はpタグです</p>'

app.append(続き)

// DOMレンダリング終了 console.log(1)

タイムアウトを設定します(()=>{

    コンソールログ("2")

    アラート('setTimeout2')

},0)

Promise.resolve().then(()=>{

    コンソールログ('3')

    警告('3')

})

コンソール.log(4)

</スクリプト>

</本文>

4.1 コード分析

上記コードの実行分析:

まず1-4実行する必要があります。

次に、まずマイクロタスク、次にマクロタスクに従って

3を出力し、3をポップアップします

次に出力2と表示され、 setTimeout2がポップアップ表示されます[誤り]

マイクロタスクとマクロタスクの間にDOMレンダリングがあるため

次にdomレンダリング、最後にマクロタスクです

そこで1-4を出力した後、 DOMレンダリングが行われます。

次に出力2とsetTimeout2がポップアップします

4.2 結論と応用シナリオ

Microtask>DOMレンダリング>Macrotask 次の例を参照してください

この結論の適用シナリオ

私たちは皆、eChart を作成したことがあります。eChart をレンダリングするタイミングはわかっています。

ノードは、ページの DOM がレンダリングされた後にのみレンダリングできます。

そのため、一部の友人は、リクエストのタイミングをmonitored()ライフサイクルに配置するでしょう

これにより、返されたデータがページ上で正常にレンダリングされることが保証されます。

実際、上記の結論に基づいています。

作成時にデータをリクエストできます。帰ってきたとき。

DOM は確実にレンダリングされます。リクエストはマクロタスクだからです。

マクロタスクの実行時間は DOM レンダリング後です。

JavaScriptのマクロタスクとマイクロタスクの詳細に関するこの記事はこれで終わりです。JavaScript のマクロタスクとマイクロタスクに関するよりJavaScript性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。