イベントループについて

以下ブラウザでの話になります。

イベントループ

時間のかかる処理があっても、ブラウザの描画などほかの処理を止めないためにある機能。

イベントループがないと

もしイベントループがないと、時間のかかる処理をする際に、全く他のことができなくなる。
画面上のボタンが押せなくなる等の支障が出る。

console.log("start");
setTimeout(function () {console.log("slow")}, 500);
console.log("end");

上記のコードをブラウザで実行すると

1. start
2. end
3. (0.5秒の遅延後)slow

の順番で表示される。

イベントループがないと

1. start
2. (0.5秒の遅延後)slow
3. end

の順番で表示される。

イベントループとは

時間のかかる処理で止まらないためにイベントループがある。
イベントループとは、JavaScriptエンジン内のスタックが空になった際、タスクキューにある先頭のコールバック関数をスタック内に入れる処理をする。

ブラウザの機能

JavaScriptに関係のあるブラウザの機能

• JavaScriptエンジン
• web apis
• タスクキュー

の3つがある。

JavaScriptエンジンは、JavaScriptを解析実行する場所で、エンジン内にはスタックがある。
web apisはsettimeoutなどの処理を行う場所。
タスクキューはweb apisのコールバック関数が入る場所。

イベントループの流れ

1. コードが読み込まれ、処理の時間がかからないものはスタックに積み上げられ、実行
2. settimeoutなどの処理はweb apisに投げられて、そこで5秒待機などの処理をする
3. web apisでの処理が終了したら、コールバック関数がタスクキューに入れられる
4. もし、スタックが空の場合は、タスクキュー内の先頭の関数がスタックに格納される