JS執(zhí)行機(jī)制

wow_worktile 發(fā)布于2019-08-26 13:36 / 3253人閱讀

摘要：事件表每次調(diào)用函數(shù)或執(zhí)行異步操作時，都會將其添加到事件表中，事件表負(fù)責(zé)記錄每個事件完成后執(zhí)行的回調(diào)函數(shù)，并監(jiān)聽事件，事件完成后會把事件的回調(diào)函數(shù)發(fā)送到事件隊列。事件隊列事件隊列接收來自事件表的回調(diào)函數(shù)，并根據(jù)順序執(zhí)行。

前言

先上一段代碼，可以根據(jù)自己之前對JS執(zhí)行機(jī)制的理解，進(jìn)行分析

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案：
script start
script end
promise1
promise2
setTimeout

如果自己的答案和上面的答案有出入，請繼續(xù)閱讀

基本概念的闡述

調(diào)用堆棧

JavaScript有一個多帶帶的調(diào)用堆棧，負(fù)責(zé)執(zhí)行JS代碼，當(dāng)即將執(zhí)行一個函數(shù)時，此函數(shù)就會被添加到調(diào)用堆棧中，當(dāng)此函數(shù)執(zhí)行完，則會出棧。

事件表

每次調(diào)用setTimeout函數(shù)或執(zhí)行異步操作時，都會將其添加到事件表中，事件表負(fù)責(zé)記錄每個事件完成后執(zhí)行的回調(diào)函數(shù)，并監(jiān)聽事件，事件完成后會把事件的回調(diào)函數(shù)發(fā)送到事件隊列。

事件隊列

事件隊列接收來自事件表的回調(diào)函數(shù)，并根據(jù)順序執(zhí)行。事件隊列中存儲兩種任務(wù)：微任務(wù)和宏任務(wù)

在當(dāng)前的微任務(wù)沒有執(zhí)行完成時，是不會執(zhí)行下一個宏任務(wù)的。
這里有兩種說法，一種說法把剛開始執(zhí)行的整體JS代碼認(rèn)為是一個宏任務(wù)，先執(zhí)行整體JS代碼這一個宏任務(wù)，執(zhí)行完成后，再執(zhí)行微任務(wù)列表中的所有微任務(wù)，所以認(rèn)為先執(zhí)一個行宏任務(wù)再執(zhí)行所有微任務(wù)

另外一種說法沒有把剛開始的JS代碼當(dāng)做宏任務(wù)，所以起始執(zhí)行的是微任務(wù)，所有微任務(wù)執(zhí)行完再執(zhí)行宏任務(wù)，認(rèn)為先執(zhí)行微任務(wù)再執(zhí)行宏任務(wù)
其實(shí)兩種說法的核心是一樣的，都是執(zhí)行一個宏任務(wù) 執(zhí)行所有微任務(wù)
事件循環(huán)

事件循環(huán)就是一個持續(xù)運(yùn)行的進(jìn)程，用于檢查調(diào)用堆棧是否為空。將我們上面所述連接起來，并循環(huán)執(zhí)行。

JS執(zhí)行機(jī)制

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

再次分析此段代碼
最初始狀態(tài)：JS調(diào)用棧為空，任務(wù)隊列中宏任務(wù)隊列有script代碼塊就緒
第一步：檢查調(diào)用棧為空，將宏任務(wù)script入棧，開始向下執(zhí)行
第二步：當(dāng)遇到異步操作時，執(zhí)行異步，并將異步事件與其回調(diào)函數(shù)注冊到事件列表，同步代碼繼續(xù)執(zhí)行
第三步：當(dāng)事件表監(jiān)聽到異步事件已經(jīng)完成，將其事件的回調(diào)函數(shù)入隊（任務(wù)隊列）
第四步：檢查到調(diào)用棧為空，先將微任務(wù)依次入棧（調(diào)用堆棧）執(zhí)行，微任務(wù)列表為空時，將宏任務(wù)入棧（調(diào)用堆棧）執(zhí)行
更多關(guān)于JS執(zhí)行機(jī)制的理解請點(diǎn)擊下面鏈接，有動畫效果有助于理解特別推薦
Tasks, microtasks, queues and schedules