Javascript 操作メカニズムイベントループ

1. 4つのコンセプト

1. JavaScriptはシングルスレッドです

シングルスレッドとは、 jsコードを上から下まで同期的にしか実行できず、同時に実行できるタスクは 1 つだけであることを意味します。これにより、実行時間が長いタスクや実行時間が不確実なタスクが、他のタスクの正常な実行をブロックすることになります。 Event Loopが表示されるのは、この問題を解決するためです。

2. タスクキュー

上記のキューイング問題を解決するために、タスクキューが作成されます。ブラウザに結果を伴う非同期タスクがある場合、それは将来の実行のためにタスクキューに追加され、他のタスクはメインスレッドで同期的に実行されます。

ここで注意すべき点は、タスクキューにタスクを追加するタイミングは、非同期タスクの結果が出た後であるということです。実際、タスクキューに存在するのは、非同期タスクのコールバック関数です。

3. 同期タスクと非同期タスク

Js プログラムにおける同期タスクはメインスレッドで実行されるタスクを指し、非同期タスクはタスクキューに入るタスクを指します。

4. JavaScript実行スタック

すべての同期タスクはメインスレッド上で実行され、実行スタックを形成します。メインスレッド上のタスクが完了すると、タスクはタスクキューから取り出されて実行されます。

var name = "zhouwei";

タイムアウトを設定する(() => {
    コンソールログ(1);
}, 1000);

console.log(名前);

上記のコードは、ブラウザでは次のように実行されます。プログラムのグローバル実行環境のコードは、main 関数にラップされたコードとして理解されます。このコードの実行スタックは、次の図に示すように変化します。

コードの実行を開始し、 mainタスク (実行のためにスタックにグローバルコード) をプッシュし、非同期タスクに遭遇したとき ( setTimeoutの後)。
ブラウザは非同期タスクを引き継ぎ、1 秒後に非同期タスクの結果 (コールバック関数) をタスクキューに追加します。
実行スタック内の同期タスクが完了します。この時点で、タスクキューは空 (1 秒未満) であり、実行スタックも空です。
非同期タスクは結果が出ると、まずタスクキューに入ります (非同期タスクが多数ある場合があるため)。
実行スタックはタスクをタスクキューから取り出し、同期的に実行を開始します。
手順 5 を繰り返します。

イベントループ

Js 実行スタックがタスクキューからタスクを継続的に読み取り、実行するプロセスをEvent Loop

タスクキューには非同期タスクの結果が格納されることはわかっていますが、非同期タスクとは何でしょうか?

1. イベント

Javascriptには多くのイベントがありますが、それらはすべて非同期タスクです。ブラウザが引き継ぎます。イベントがトリガーされると、イベントコールバックがタスクキューに追加され、Js 実行スタックにタスクがない場合に実行されます。

2. HTTPリクエスト
3. タイマー
4. requestAnimationFrameなど

macrotaskとmicrotask
タスクキューとEvent Loopを理解した後、Js 実行スタックがタスクキューからタスクを読み取って実行することはわかりますが、この特定のプロジェクトについては明確ではありません。ここでは、イベントループを理解するのに役立つマクロタスクとマイクロタスクの概念を紹介します。

タスクキューに入る非同期タスクコールバックは、マクロタスクとマイクロタスクに分けられます。マクロタスクとマイクロタスクを実行するための Js 実行スタックのルールを下図に示します。

Js 実行スタックは、最初にマクロタスク (グローバルコード) を実行し、タスクキューからすべてのマイクロタスクを読み取り、UI レンダリング (ブラウザーレンダリングインターフェイス) を実行し、タスクキューからマクロタスクを読み取り、すべてのマイクロタスクを実行し、UI レンダリングを実行し、…

イベントループの各ラウンドが終了すると (1 つのマクロタスク + すべてのマイクロタスク)、ブラウザーはインターフェイスのレンダリングを開始します (レンダリングが必要な UI がある場合、それ以外の場合は UI レンダリングは実行されません)。UI UI rendering終了すると、イベントループの次のラウンドが開始されます。

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

タイムアウトの設定
間隔の設定
setImmediate (ノード)
requestAnimationFrame (ブラウザ)
I/O (イベントコールバック)
UIレンダリング（ブラウザレンダリング）

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

約束
process.nextTick (ノード)
MutationObserver (DOM の変更を検出するために最新のブラウザが提供する Web インターフェース)

setTimeout 遅延の問題

一般的に、コード内のsetTimeoutのコールバックの実行時間は、設定された時間よりも長くなります。これは、 setTimeoutで指定された時間が経過した後、コールバック関数がタスクキューに追加されるものの、この時点で Js 実行スタックで実行中のタスクが存在する可能性があるためです。このコールバックは、Js 実行スタック内のタスクが完了するまで待機してから実行する必要があります。これがsetTimeout遅延問題です。

3. 実戦

次のコード出力を練習してください。

コンソールログ(1);

タイムアウトを設定する(() => {
    コンソールログ(2);
    Promise.resolve().then(() => {
        コンソール.log(3)
    });
});

新しいPromise(resolve => {
    コンソールログ(4);
    タイムアウトを設定する(() => {
        コンソールログ(5);
    });
    解決する(6)
}）。次に、データ => {
    コンソールにログ出力します。
})

タイムアウトを設定する(() => {
    コンソール.log(7);
})

コンソールログ(8);

この質問を分析するには、上で説明した js 実行メカニズムを使用します。

1: グローバルタスクで同期コード出力を実行します。

1
4
8

ここで注意すべき点は、 Promiseが受け入れるhandle関数は同期タスクであるのに対し、 thenメソッドは非同期タスクであるため、4 が直接出力されることです。

2: この時点で、タスクキューには 3 つのsetTimeoutマクロタスクと 1 つのPromiseマイクロタスクがあります。

// この時点でのマクロタスクは setTimeout(() => {
    コンソールログ(2);
    Promise.resolve().then(() => {
        コンソール.log(3)
    });
});

タイムアウトを設定する(() => {
    コンソールログ(5);
});


タイムアウトを設定する(() => {
    コンソール.log(7);
})

// この時点で、マイクロタスクは then(data => {
    コンソールにログ出力します。
})

マイクロタスクを実行し、出力: 6

3: 最初のマクロタスクを実行します

タイムアウトを設定する(() => {
    コンソールログ(2);
    Promise.resolve().then(() => {
        コンソール.log(3)
    });
});

出力: 2

このマクロタスクでは、マイクロタスクがタスクキューに追加されます。この時点で、タスクキューには新しいマイクロタスクがあります。

4: マイクロタスクを実行し、出力: 3

それから（() => {
   コンソール.log(3)
});

5: ルールに従ってタスクの実行を継続します。出力: 5、7

全体的な出力は次のとおりです。

1、4、8、6、2、3、5、7

これがあなたの答えですか？

要約:

javascritpタスクは同期タスクと非同期タスクに分けられます
同期タスクはメインスレッド (Js 実行スタック) で実行され、非同期タスクは他のスレッドに引き継がれ、非同期タスクに結果がもたらされた後、そのコールバックがタスクキューに追加されます。
タスクキュー内のタスクは、マクロタスクとマイクロタスクに分けられます。 Js 実行スタックは常に最初にマクロタスクを実行し、次にすべてのマイクロタスクを実行します...

Javascriptのイベントループの動作メカニズムに関するこの記事はこれで終わりです。Javascript のイベントループの動作メカニズムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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