JavaScriptのイベントループの仕組みを詳しく解説-jsチュートリアル-php.cn

この記事では、JavaScript イベントループメカニズムに関する関連知識ポイントを共有します。興味のある方は、学習して参照してください。

ご存知のとおり、JavaScript はシングルスレッド言語です。Web-Worker は html5 で提案されましたが、シングルスレッドである JavaScript の核心は変わっていません。 HTML 仕様のこの部分を参照してください:

イベント、ユーザーインタラクション、スクリプト、レンダリング、ネットワーキングなどを調整するには、ユーザーエージェントはこのセクションで説明されているように 2 種類のイベントループを使用する必要があります。イベントループ: コンテキストの閲覧用とワーカー用のループです。

イベント、ユーザーインタラクション、スクリプト、UI レンダリング、およびネットワーク処理を調整するには、ユーザーエンジンはイベントループを使用する必要があります。イベントループは 2 つのタイプで構成されます。1 つはブラウジングコンテキストに基づくもの、もう 1 つはワーカーに基づくもので、どちらも独立して実行されます。次の記事では、例を使用して、コンテキストの閲覧に基づくイベントループメカニズムに焦点を当てます。

次の JavaScript コードを見てみましょう:

console.log(&#39;script start&#39;);

setTimeout(function() {
 console.log(&#39;setTimeout&#39;);
}, 0);

Promise.resolve().then(function() {
 console.log(&#39;promise1&#39;);
}).then(function() {
 console.log(&#39;promise2&#39;);
});

console.log(&#39;script end&#39;);

ログイン後にコピー

まず、このコードの出力シーケンスを推測し、それをブラウザーのコンソールに入力して、実際の出力シーケンスが一致するかどうかを確認します。推測された順序は一致していますか? そうであれば、JavaScript イベントループのメカニズムをある程度理解していることを意味し、実際の出力順序が推測と一致しない場合は、この記事の次の部分を読んでください。あなたの質問に答えます。

タスクキュー

すべてのタスクは、同期タスクと非同期タスクに分類できます。同期タスクは、その名前が示すように、通常、メインスレッドに直接実行されるタスクです。実行; 非同期タスクは、ajax ネットワークリクエスト、setTimeout タイミング関数など、非同期で実行されるタスクであり、すべての非同期タスクはタスクキュー (イベントキュー) メカニズムを通じて調整されます。次の図を使用して、具体的な状況を大まかに説明します。

# 同期タスクと非同期タスクはそれぞれ異なる実行環境に入ります。同期タスクは、メインスレッドに入ります。メイン実行スタック、および非同期タスクがメインスレッド、つまりメイン実行スタックに入ります。実行後にメインスレッド内のタスクが空の場合、対応するタスクがイベントキューから読み取られ、実行のためにメインスレッドにプッシュされます。上記のプロセスが継続的に繰り返されることをイベントループと呼びます。

イベントループでは、各ループ操作はティックと呼ばれます。仕様を読むと、各ティックのタスク処理モデルが比較的複雑であることがわかり、その主要なステップは次のように要約できます。

##このティックで最初にキューに入った最も古いタスクを選択します (存在する場合)。それを (1 回) 実行します。
マイクロタスクが存在するかどうかを確認します。存在する場合は、マイクロタスクキューがクリアされるまで実行を続けます
Update render

メインスレッドは上記の手順を繰り返します

画像を使用してプロセスを説明できます:

#「マイクロタスクとは何ですか?」と聞きたい人もいると思います。仕様ではタスクを分割することが規定されています。マクロタスク (マクロタスク) とマイクロタスク (マイクロタスク) の 2 つのカテゴリに分かれており、各マクロタスクが完了した後、すべてのマイクロタスクをクリアする必要があります。ここでのマクロタスクは、一部の記事ではタスクと呼ばれるものでもありません。以下の記事で説明されているタスクはすべてマクロタスクとみなされます。

(マクロ)タスクの主な内容: スクリプト (コード全体)、setTimeout、setInterval、I/O、UI インタラクティブイベント、setImmediate (Node.js 環境)

マイクロタスクの主な内容: Promise、 MutaionObserver、process.nextTick (Node.js 環境)

setTimeout/Promise などの API がタスクソースとなり、タスクキューに入るのはそれらで指定された特定の実行タスクです。異なるタスクソースからのタスクは、異なるタスクキューに入ります。このうち、setTimeoutとsetIntervalは由来が同じです。

サンプルコードの分析

単語数は数千なので、例を使ってわかりやすく説明する方がよいでしょう。以下では、仕様に従い、上記の例を段階的に分析していきます。まず、サンプルコードを投稿します (上にスクロールする手間を省くため)。

console.log(&#39;script start&#39;);

setTimeout(function() {
 console.log(&#39;setTimeout&#39;);
}, 0);

Promise.resolve().then(function() {
 console.log(&#39;promise1&#39;);
}).then(function() {
 console.log(&#39;promise2&#39;);
});

console.log(&#39;script end&#39;);

ログイン後にコピー

スクリプト全体が最初のマクロタスクとしてメインスレッドに入り、console.log に遭遇し、script startを出力します

## が出力されます。
この時点では、次の表に示すように、イベントキューに 3 つのタスクが存在します。

マクロタスクマイクロtask setTimeoutthen1-then2

执行微任务，首先执行then1，输出 promise1, 然后执行 then2，输出 promise2，这样就清空了所有微任务
执行 setTimeout 任务，输出 setTimeout 至此，输出的顺序是：script start, script end, promise1, promise2, setTimeout

so，你猜对了吗？

看看你掌握了没

再来一个题目，来做个练习：

console.log(&#39;script start&#39;);

setTimeout(function() {
 console.log(&#39;timeout1&#39;);
}, 10);

new Promise(resolve => {
 console.log(&#39;promise1&#39;);
 resolve();
 setTimeout(() => console.log(&#39;timeout2&#39;), 10);
}).then(function() {
 console.log(&#39;then1&#39;)
})

console.log(&#39;script end&#39;);

ログイン後にコピー

这个题目就稍微有点复杂了，我们再分析下：

首先，事件循环从宏任务 (macrotask) 队列开始，最初始，宏任务队列中，只有一个 scrip t(整体代码)任务；当遇到任务源 (task source) 时，则会先分发任务到对应的任务队列中去。所以，就和上面例子类似，首先遇到了console.log，输出 script start；接着往下走，遇到 setTimeout 任务源，将其分发到任务队列中去，记为 timeout1；接着遇到 promise，new promise 中的代码立即执行，输出 promise1, 然后执行 resolve ,遇到 setTimeout ,将其分发到任务队列中去，记为 timemout2, 将其 then 分发到微任务队列中去，记为 then1；接着遇到 console.log 代码，直接输出 script end 接着检查微任务队列，发现有个 then1 微任务，执行，输出then1 再检查微任务队列，发现已经清空，则开始检查宏任务队列，执行 timeout1,输出 timeout1；接着执行 timeout2，输出 timeout2 至此，所有的都队列都已清空，执行完毕。其输出的顺序依次是：script start, promise1, script end, then1, timeout1, timeout2

用流程图看更清晰：