イベントループ：Promiseとタイマー、どちらが先？

ブラウザでA・D・B・Cと出力される小さなプログラムを、現在のタスク、マイクロタスク、タイマーに分けて追う。

書いた順と、コールバックの実行順は違う

ブラウザの通常のスクリプトとして、次のコードだけを実行するとします。タイマーのコールバックが実行できるまで、ページは開いたままとします。

javascript

console.log('A');
setTimeout(() => console.log('C'), 0);
Promise.resolve().then(() => console.log('B'));
console.log('D');

答えは A → D → B → C です。現在の処理、マイクロタスク、タイマーのタスクを分けると、その理由を追えます。Node.js特有のキューや、モジュールの評価順を説明する図ではありません。HTML Standard：イベントループ

最初の console.log でAが出ます。次のsetTimeoutは、条件が整った後にコールバックをタスクとして実行するための予約です。そこでCを即座に実行するわけではありません。

0 は、今のJavaScript処理を中断して割り込む指示ではなく、指定した遅延を経た後の実行を求める値です。実際の時刻には、ほかの処理やブラウザの制限も関わります。

図のタイマー欄は「待っている仕事」をまとめた説明です。まだ実行可能になる前のタイマー待ちと、実行可能になったタスクの段階を、本文で区別しています。

Promise.resolve() が返すPromiseは既に履行済みですが、thenに渡したコールバックを、この行で同期的に呼び出すわけではありません。Promiseの反応をマイクロタスクとして予約します。

現在の処理は続き、最後の console.log('D') に到達します。ここまでの出力はA、Dです。BもCも、今のコードへ割り込んでいません。

「Promiseに関連するコードはすべて後で動く」と広げないようにします。例えばPromiseのコンストラクターに渡すexecutorは同期実行ですが、このサンプルには登場しません。MDN：マイクロタスク

同期処理が終わり、マイクロタスクのチェックポイントへ進みます。キューにあるPromiseの反応が実行され、Bが表示されます。出力はA、D、Bになりました。

この場面では、実行可能なタイマーがあっても、次のタスクへ移る前にマイクロタスクを処理します。図の紫の札が「実行中」の欄へ動くのは、その切り替わりです。

ブラウザの仕様ではチェックポイントが行われる場所は他にもあります。これは、この短いスクリプトでの順序を理解するための基本的な経路です。HTML Standard：マイクロタスクのチェックポイント

マイクロタスクの処理が終わると、イベントループは次の仕事を選べます。タイマーが実行可能になり、そのタスクが選ばれるとCが表示されます。これでA、D、B、Cが揃います。

ブラウザには入力、通信などの仕事もあり、全種類の仕事が一つのFIFOキューに並んでいると断定はできません。この例の4文字の順序を、そのままあらゆる非同期APIの順序表へ拡張しないようにします。

描画にも機会がありますが、タスクのたびに必ず一回画面を描くという保証ではありません。フレーム更新の必要性やブラウザの状態も関わります。

別の例として、Bの処理がさらにB2をマイクロタスクへ追加したとします。チェックポイントは、キューが空になるまで取り出して処理します。チェックポイント開始時にあった一個だけで打ち切るわけではありません。

そのため、自分を無限に追加するマイクロタスクは、次のタスクや描画の機会を妨げます。小さな非同期処理へ分けたつもりでも、利用者からは固まって見えることがあります。

後で動かすことは、他の仕事へ必ず公平に時間を渡すことではないのです。MDN：マイクロタスク使用上の注意

答えはいいえです。通常のthenのコールバック内で長い計算を行えば、それを実行している間、同じ実行環境の他の仕事は待ちます。Promiseは別スレッドで計算を始める命令ではありません。

別の実行場所を必要とするCPU処理なら、Web Workerなどが検討対象です。仕事をどこで実行するかと、いつ実行するかを分けて考えます。

この作品のコードに戻れば、同期のAとD、マイクロタスクのB、タイマーのCです。札を三つの欄に分けてから動かすと、暗記よりも実行順を説明しやすくなります。