非同期処理 (1): Javascript の動作の流れ (JS エンジン / Call Stack / Event Queue)

5356 ワード

テキストリンク

Javascriptの動作

Javascriptがブラウザでどう動作しているかを確認しましょう。ここではChromeを基準にします。

V8: Javascript Engine

Javascriptのエンジンの中ではgoogleのV8エンジンがあり、V8はChromeとNode.jsで利用されます。

Heap

メモリを管理する領域

Call Stack

実行するタスクを管理する領域
実行される関数が呼び出された瞬間ここに保存されます。シングルスレッドのため一個しかなく、一番上の積まれた関数を先に処理します。 LIFO(Last In First Out)

Web APIs

ブラウザ側で提供するAPIでDOM, Ajax, timerなどがあります。
Call Stackは非同期関数の実行をWeb APIにお願いします。
非同期処理は後述しますが、前の処理が終わるのと関係なく並列で処理することを指します。
WebAPIは受け取った関数を実行し、完了したら(例:setTimeoutで設定した10秒が経ったら)非同期処理のCallback関数(例:10秒が経ったら実行される関数)をEvent Queueに渡します。
Call Stackがシングルスレッドのため、順番通りに処理しないといけませんが、WebAPIが非同期処理を担当してくれるため、あたかも並列で処理ができるように見えます。

Event Queue

Callback Queueとも呼ばれます。
Task Queueにも呼ばれましたが、Micro Task Queueの概念も出てきたため、名称が変わりました。

Web APIから受け取ったCallback関数を保存します。Call Stackと違って、先に入ってきた関数を先に処理します。FIFO(First In First Out)
ここに保存された作業たちは後述するEvent LoopによってCall Stackに移動されて実行されることになります。Event Queueの中でも優先順位がありますが、そこについては図を参考にしてください。

Event Loop

Call StackとEvent Queueを監視し、Call Stackに入っていた全ての作業が完了されたら、Event Queueの作業を順番にCall Stackに移動させます。この作業を繰り返します。

動作の例

では、以下のソースコードを見てみましょう。

function main(){
  console.log('A');
  setTimeout(
    function exec(){ console.log('B'); }
  ,0);
	console.log('C');
}
main();

結果はどうなるのでしょうか。
二つ目の関数は、setTimeoutが0秒のためすぐ実行されるから A, B, Cの順に表示されると思うかもしれませんが、結果はこうなります。

// A
// C
// B

setTimeoutは非同期処理なのでCall Stackですぐ実行されるのではなく、WebAPIの方に一回送られて0秒がたった後、Event LoopによってCall Stackに戻ります。その間にconsole.log('C')はCallStackですぐ実行されるため、 A -> C -> B順に結果が表示されます。