jsのイベントループ機構の解析

序文

ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエストを非常にうまく処理できます。なぜでしょうか?この背後にある原理は、イベントループメカニズムと大きく関係しています。

イベントループを調べる前に、ブラウザ実行スレッドを理解する必要があります~~

ブラウザのレンダリングプロセスはマルチスレッドです。ブラウザ内の各タブは独立したプロセスを表します。ブラウザカーネルはブラウザのマルチプロセスの 1 つであり、主にページのレンダリング、スクリプトの実行、イベント処理などを担当します。含まれるスレッドは次のとおりです

GUI レンダリングスレッド: ページのレンダリング、HTML および CSS の解析を行って DOM ツリーを形成します。
JS エンジンスレッド: コード、ユーザー入力、ネットワーク要求を解釈して実行します。
イベント処理スレッド: クリック、マウス、その他のインタラクティブなイベントが発生すると、イベント関数がキューに入れられます。
タイマーがスレッドをトリガーします。時間切れになると、実行関数がタスクキューにプッシュされます。
http ネットワークリクエストスレッド: ユーザーの get リクエストと post リクエストを処理し、返された結果をタスクキューにプッシュします。

ブラウザのレンダリングプロセスを理解した後は、JS の動作メカニズムも理解する必要があります。 JSの動作メカニズムはイベントループです

実行スタック

JS が実行される環境はホスト環境と呼ばれます。

実行スタック: コールスタックは、さまざまな関数の実行環境を格納するために使用されるデータ構造です。各関数が実行される前に、その関連情報が実行スタックに追加されます。関数が呼び出される前に実行環境が作成され、実行スタックに追加されます。関数が呼び出された後、実行環境は破棄されます。

イベントループ

js のすべてのタスクは、同期タスクと非同期タスクに分けられます。同期タスクは、すぐに実行されるタスクです。同期タスクは通常、実行のためにメインスレッドに直接入ります。一方、非同期タスクは、Ajax ネットワークリクエスト、setTimeout タイミング関数など、すべて非同期タスクである非同期で実行されるタスクです。非同期タスクは、タスクキュー (先入れ先出し) メカニズムを通じて調整されます。同期タスクと非同期タスクはそれぞれ異なる実行環境に入ります。同期タスクはメインスレッド、つまりメイン実行スタックに入り、非同期タスクはタスクキューに入ります。メインスレッド内のタスクが完了して空になると、タスクキューが読み取られ、対応するタスクが読み取られ、実行のためにメインスレッドにプッシュされます。この一定の繰り返しをイベントループと呼びます。具体的なプロセスは以下の図の通りです。

イベントループでは、各ループ操作はティックと呼ばれます。各ティックタスクキーの手順は、次のようにまとめることができます。1. マクロタスクを実行します (スタックにマクロタスクがない場合は、イベントキューから取得します)。2. 実行中にマイクロタスクに遭遇した場合は、マイクロタスクのタスクキューに追加します。3. マクロタスクの実行後、現在のマイクロタスクキュー内のすべてのマイクロタスクが直ちに実行されます (順番に)。4. 現在のマクロタスクの実行後、レンダリングのチェックを開始し、その後 GUI スレッドがレンダリングを引き継ぎます。5. レンダリングが完了したら、JS スレッドが引き続き引き継いで次のマクロタスクを開始します (イベントキューから取得します)。

マクロタスクには主に、スクリプト（コード全体）、setTimeout、setInterval、I/O、UIインタラクションイベント、setImmediate（Node.js環境）が含まれます。
マイクロタスクには主に、Promise、MutaionObserver、process.nextTick（Node.js 環境）が含まれます。

イベントループの例

console.log('スクリプトの開始');
//スクリプト全体が最初のマクロタスクとしてメインスレッドに入り、console.logに遭遇し、スクリプト開始を出力します。
setTimeout(関数() {
  コンソールログに'setTimeout'と入力します。
}, 0);
//setTimeoutに遭遇すると、そのコールバック関数がマクロタスクイベントキューに配布されます Promise.resolve().then(function() {
  コンソールにログ出力します。
}).then(関数() {
  コンソールにログ出力します。
});
// Promise に遭遇すると、その then 関数がマイクロタスク イベント キューに割り当てられ、then1 として記録されます。次に、別の then 関数に遭遇し、マイクロタスク イベント キューに割り当てられ、then2 として記録されます。
console.log('スクリプト終了');
//console.logに遭遇したら、出力スクリプト終了

このように、イベントキューには、マクロタスク: setTimeout、マイクロタスク: then1、then2 の 3 つのタスクがあります。まずマイクロタスクthen1を実行し、promise1を出力し、次にthen2を実行し、promise2を出力して、すべてのマイクロタスクをクリアします。

setTimeoutタスクを実行し、setTimeoutを出力します。これまでの出力順序は、スクリプト開始、スクリプト終了、promise1、promise2、setTimeoutです。

要約:

JavaScript はシングルスレッド言語です。非同期操作はイベントループキューに配置され、メイン実行スタックの実行を待機します。専用の非同期実行スレッドはありません。

js のイベントループの仕組みについての記事はこれで終わりです。より関連性の高い js イベントループのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: