JSのイベントループの図
わかりやすい。
JS基礎いろいろーイベントループ
https://scrapbox.io/files/676a05b57fd2626f79d33c22.png
処理順番で言えば：
メインスレッドでコードを解釈（interpret）し始める
同期コードは直接コールスタックで実行
非同期コードはワーカースレッドに預ける
実行待ちの非同期タスクをタスクキューに投げる
コールスタックの関数がなくなるまで実行
コールスタックが空っぽになると、タスクキューから非同期のタスクを入れる
非同期タスクを順次に実行
並行モデルとイベントループ - JavaScript | MDN
JavaScript で queueMicrotask() によるマイクロタスクの使用 - Web API | MDN
JavaScriptがブラウザでどのように動くのか | メルカリエンジニアリング
併せて読みたい