1.下圖為瀏覽器運行環(huán)境架構(gòu)圖：
（1）j引擎：調(diào)用棧跋理、web APIs绷跑、Event Loop機制椅野、宏任務(wù)隊列、微任務(wù)隊列
（2）渲染引擎
（3）網(wǎng)絡(luò)通信模塊
（4）GPU
(5) 和硬件榜旦、文件系統(tǒng)相關(guān)的模塊等
2.下圖是JS引擎的大致架構(gòu)邏輯：
-
微任務(wù)的類型：
（1）then的回調(diào)
（2）catch的回調(diào)
（3）await的后續(xù)調(diào)用
（4）queueMicrotask 生成的函數(shù)
（5）MutationObserver的回調(diào)
6d77ecf5268dbcd697e5134f138a0ff.jpg 宏任務(wù)類型：
（1）script全部代碼
（2）setTimeout、setInterval景殷、setImmediate（瀏覽器暫時不支持溅呢，只有IE10支持澡屡，具體可見MDN）
（3）I/O
（4）UI Rendering
4.Event Loop：eventLoop檢查主棧中執(zhí)行完畢后，從微任務(wù)隊列中取出所有微任務(wù)到主棧中執(zhí)行咐旧，主棧再次執(zhí)行完畢之后驶鹉，從宏任務(wù)隊列中取出最早壓入的宏任務(wù)到主棧中執(zhí)行，主棧為空之后再次取出微任務(wù)執(zhí)行铣墨，如此循環(huán)室埋。
5.為什么有Event Loop？
js引擎在單線程模式下執(zhí)行代碼的過程中伊约，會遇到一些長任務(wù)姚淆，譬如說：網(wǎng)絡(luò)請求，文件IO屡律，需要等待用于交互等的操作腌逢，這些任務(wù)處理結(jié)果一般以callback函數(shù)或者Promise的形式體現(xiàn)。如果長時間等待這些長任務(wù)執(zhí)行結(jié)束之后再執(zhí)行其他代碼超埋，不僅會帶來長時間的等待搏讶，也是在浪費CPU資源，因此需要一個機制來調(diào)起長任務(wù)霍殴，并且繼續(xù)執(zhí)行其他同步任務(wù)媒惕。
當(dāng)長任務(wù)得到響應(yīng)，例如網(wǎng)絡(luò)請求到數(shù)據(jù)之后来庭，關(guān)于數(shù)據(jù)的回調(diào)會被推進任務(wù)隊列吓笙，而不是立即推入主棧執(zhí)行，因為這樣會擾亂正在執(zhí)行的代碼順序巾腕。當(dāng)主棧中已有的代碼執(zhí)行完畢之后面睛，再從任務(wù)隊列中取出任務(wù)推薦主棧執(zhí)行。
