【いべんとるーぷ】

イベントループ とは?

💡 シングルスレッドで「大量の処理」をさばく秘密の仕組み
📌 このページのポイント
コール スタック 非同期呼出 Web API Timer, HTTP, DOM Events 完了通知 コールバック キュー イベント ループ 実行 同期処理 非同期処理 待機中 監視・転送 スタックが空のとき、キューからコールバックを取り出して実行
イベントループの仕組み
ひよこ ひよこ

シングルスレッドで大量処理できるの?

ペンギン先生 ペンギン先生

I/O(ネットワーク、ディスク、DB)はOSのカーネルに委譲して、JSスレッドは空くんだ。完了通知が来たらコールバックキューに入れて順番に実行する。つまり「待ち時間」にスレッドが遊ばないから効率的。ただしCPUバウンドな処理(画像処理、暗号計算)はスレッドを占有するから別スレッドに逃がす必要があるよ

ひよこ ひよこ

マイクロタスクとマクロタスクの違いは?

ペンギン先生 ペンギン先生

マイクロタスク(Promise.then、queueMicrotask)はマクロタスク(setTimeout、setInterval、I/Oコールバック)より優先されるよ。コールスタックが空になるたびにマイクロタスクキューが全て処理され、その後にマクロタスクキューから1つ処理される。この優先順位を理解しないと実行順が予測できないバグに悩まされるんだ

ひよこ ひよこ

setTimeout(fn, 0) って即座に実行される?

ペンギン先生 ペンギン先生

されないよ。setTimeout(fn, 0)はマクロタスクキューに入れるだけ。現在のコールスタックが空になり、マイクロタスクが全て処理された後に実行される。だから「Promise.resolve().then(() => console.log('A'))」と「setTimeout(() => console.log('B'), 0)」では必ずAが先に出力されるんだ

ひよこ ひよこ

イベントループを理解するメリットは?

ペンギン先生 ペンギン先生

①パフォーマンス問題のデバッグ(重い処理がイベントループをブロックしてUIが固まる原因が分かる)、②非同期コードの実行順を正しく予測できる、③Node.jsサーバーの性能チューニング。Philip Robertsの「What the heck is the event loop anyway?」はJSエンジニア必見の名講演だよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「イベントループ」って出てきたら「JS非同期処理を管理するシングルスレッドの仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Event Loop」 = イベントループ
💬 Event(イベント)をLoop(繰り返し)処理する仕組み。JSの心臓部だよ
← 用語集にもどる