執(zhí)行棧
先來看一下《JavaScript高級(jí)程序設(shè)計(jì)第三版》中有一段關(guān)于執(zhí)行函數(shù)與執(zhí)行棧的描述茎辐。
執(zhí)行環(huán)境(execution context著蛙，為簡單起見祭阀，有時(shí)也稱為“環(huán)境”)是 JavaScript 中最為重要的一個(gè)概念沙咏。執(zhí)行環(huán)境定義了變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù)食茎，決定了它們各自的行為丹锹。每個(gè)執(zhí)行環(huán)境都有一個(gè) 與之關(guān)聯(lián)的變量對(duì)象(variable object)，環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中芬失。
每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境。當(dāng)執(zhí)行流進(jìn)入一個(gè)函數(shù)時(shí)匾灶，函數(shù)的環(huán)境就會(huì)被推入一個(gè)環(huán)境棧中棱烂。 而在函數(shù)執(zhí)行之后，棧將其環(huán)境彈出阶女，把控制權(quán)返回給之前的執(zhí)行環(huán)境颊糜。ECMAScript 程序中的執(zhí)行流正是由這個(gè)方便的機(jī)制控制著。
接下來看一段代碼秃踩，以及這段代碼在chrome中的運(yùn)行過程衬鱼。
function foo(b) {
var a = 10;
return a + b + 11;
}
function bar(x) {
var y = 3;
return foo(x * y);
}
console.log(bar(7)); // 返回 42
我們可以看到以上js代碼執(zhí)行時(shí)，首先調(diào)用了bar函數(shù)憔杨，bar函數(shù)先進(jìn)入棧鸟赫，在bar函數(shù)中又調(diào)用了foo函數(shù)，foo函數(shù)進(jìn)棧消别，然后根據(jù)棧先進(jìn)后出的原則抛蚤，foo函數(shù)執(zhí)行完畢后先出棧，然后bar函數(shù)出棧寻狂。
任務(wù)隊(duì)列(Task Queue)與事件循環(huán)(Event Loop)
但是執(zhí)行棧并不是遇到什么代碼都立即執(zhí)行的岁经，比如ajax。
我們?cè)谄綍r(shí)開發(fā)中經(jīng)常會(huì)用到ajax蛇券，ajax回調(diào)函數(shù)里的代碼是異步執(zhí)行的缀壤。以下代碼會(huì)先打印1，然后打印2纠亚。
$.ajax({
type:'post',
url:'xxx.com',
data:{xx:'xx'},
success(result) {
console.log(2)
},
});
console.log(1)
這是因?yàn)閖s是單線程的塘慕，執(zhí)行棧不可能一直等待ajax的回調(diào)函數(shù)執(zhí)行完畢之后再執(zhí)行下面的代碼，這樣的話如果網(wǎng)絡(luò)不通暢或者很耗時(shí)那么下面的代碼會(huì)被阻塞很久菜枷。所以js在遇到ajax這樣的異步代碼時(shí)會(huì)將其加入到一個(gè)任務(wù)隊(duì)列中苍糠，執(zhí)行棧處理完任務(wù)后處于空閑狀態(tài)時(shí)就會(huì)取出任務(wù)隊(duì)列中最前面的任務(wù)進(jìn)入執(zhí)行棧。
檢查執(zhí)行棧是否空閑啤誊，取出任務(wù)隊(duì)列中的任務(wù)并執(zhí)行的過程是不斷循環(huán)的岳瞭，這個(gè)過程就是事件循環(huán)。
[圖片上傳失敗...(image-d64c57-1584078574091)]
上圖是MDN上關(guān)于并發(fā)模型與事件循環(huán)的可視化描述蚊锹，stack就是執(zhí)行棧瞳筏，queue就是任務(wù)隊(duì)列。
微任務(wù)(microtask)和宏任務(wù)(macrotask)
在js中除了ajax外牡昆，其實(shí)還有很多我們熟知的異步代碼姚炕，比如setTimeout,setInterval,Promise等摊欠，同為異步代碼，但是還是有一些區(qū)別的柱宦。
這些異步代碼加入到任務(wù)隊(duì)列之后會(huì)分為 微任務(wù) 和 宏任務(wù) 些椒。
- 微任務(wù):
process.nextTick,promise，MutationObserver掸刊。 - 宏任務(wù): 主代碼塊免糕，
MessageChannel,setTimeout，setInterval忧侧，setImmediate石窑，network IO，UI render蚓炬。
事件循環(huán)步驟
從上圖中可以了解松逊，事件循環(huán)中，宏任務(wù)和微任務(wù)是按照一定步驟執(zhí)行的肯夏。
首先檢查隊(duì)列中是否有等待執(zhí)行的宏任務(wù)经宏，有則執(zhí)行一個(gè)宏任務(wù)。
然后檢查隊(duì)列中是否有等待執(zhí)行的微任務(wù)熄捍，有則執(zhí)行隊(duì)列中所有微任務(wù)烛恤。
判斷是否需要渲染UI，如果需要?jiǎng)t渲染UI并 回到第1步 余耽，不需要?jiǎng)t直接回到第1步缚柏，檢查隊(duì)列中是否有等待執(zhí)行的宏任務(wù)。
console.log('start')
setTimeout(() => {
console.log('setTimeout callback');
});
Promise.resolve().then(function() {
console.log('promise then callback')
})
按照上面事件循環(huán)的步驟碟贾，應(yīng)該先進(jìn)行第一個(gè)宏任務(wù)主代碼塊的執(zhí)行币喧，打印start,遇到setTimeout將其加入到 宏任務(wù)，遇到promise.then將其加入到 微任務(wù)袱耽，此時(shí)第一個(gè)宏任務(wù)主代碼塊已經(jīng)執(zhí)行完畢杀餐，接下來檢查隊(duì)列中的微任務(wù)并執(zhí)行，所以打印 'promise then callback' 朱巨，執(zhí)行完所有微任務(wù)后史翘，重新檢查任務(wù)隊(duì)列發(fā)現(xiàn)宏任務(wù)setTimeout然后執(zhí)行，打印 'setTimeout callback'冀续。
在chrome調(diào)試代碼運(yùn)行步驟結(jié)果符合預(yù)期琼讽。
我們?cè)賮砜匆粋€(gè)稍微復(fù)雜點(diǎn)的例子
console.log('start')
setTimeout(() => {
console.log('setTimeout callback');
Promise.resolve().then(function() {
console.log('promise2 in setTimeout')
setTimeout(()=>{
console.log('setTimeout2 in Promise2');
})
})
});
Promise.resolve().then(function() {
console.log('promise then callback')
})
上面的代碼其實(shí)一共進(jìn)行了 3次 事件循環(huán)
- 第1次 循環(huán)打印 'start' 與 'promise then callback'。
- 第2次 循環(huán)打印了 'setTimeout callback' 與 'promise2 in setTimeout'洪唐。
- 第3次 循環(huán)打印了 'setTimeout2 in Promise2'钻蹬。
