JavaScript執(zhí)行機(jī)制、事件循環(huán)

rose 發(fā)布于2019-08-22 13:59 / 3536人閱讀

摘要：曾經(jīng)的理解首先，是單線程語(yǔ)言，也就意味著同一個(gè)時(shí)間只能做一件事，那么為什么不是多線程呢這樣還能提高效率啊假定同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)節(jié)點(diǎn)上編輯了內(nèi)容，而另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器就很懵逼了，到底以執(zhí)行哪個(gè)操作呢所以，設(shè)計(jì)者把

Event Loop曾經(jīng)的理解

首先，JS是單線程語(yǔ)言，也就意味著同一個(gè)時(shí)間只能做一件事，那么

為什么JavaScript不是多線程呢？這樣還能提高效率啊

假定JS同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上編輯了內(nèi)容，而另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器就很懵逼了，到底以執(zhí)行哪個(gè)操作呢？

所以，設(shè)計(jì)者把JS設(shè)計(jì)成單線程應(yīng)該就很好理解了，為了避免類似上述操作的復(fù)雜性，這一特征將來(lái)也不會(huì)變。

但是單線程有一個(gè)問(wèn)題：一旦這個(gè)線程被阻塞就無(wú)法繼續(xù)工作了，這肯定是不行的

由于異步編程可以實(shí)現(xiàn)“非阻塞”的調(diào)用效果，引入異步編程自然就是順理成章的事情了，那么

JS單線程如何實(shí)現(xiàn)異步的呢？

今天的主咖登場(chǎng)——事件循環(huán)(Event Loop)，JS異步是通過(guò)的事件循環(huán)實(shí)現(xiàn)的，理解了Event Loop機(jī)制，就理解
了JS的執(zhí)行機(jī)制。

先來(lái)段代碼：

console.log(1)

setTimeout(()=>{
    console.log(2)
}, 0)

for(let i = 3; i < 10000; i++){
    console.log(i)
}

執(zhí)行結(jié)果：1 3 4 5 6 7 ... 9997 9998 9999 2

setTimeout里的函數(shù)并沒(méi)有立即執(zhí)行，我們都知道這部分叫異步處理模塊，延遲了一段時(shí)間，滿足一定條件后才執(zhí)行

仔細(xì)想想，我們?cè)贘S里通常把任務(wù)分為“同步任務(wù)”和“異步任務(wù)”，它們有以下的執(zhí)行順序：

判斷任務(wù)是同步的還是異步的，如果是同步任務(wù)就進(jìn)入主線程執(zhí)行棧中，如果是異步任務(wù)就進(jìn)入Event Table并注冊(cè)函數(shù)，當(dāng)滿足觸發(fā)條件后，進(jìn)入Event Queue
只有等到主線程的同步任務(wù)執(zhí)行完后，才會(huì)去Event Queue中查找是否有可執(zhí)行的異步任務(wù)，如有，則進(jìn)入主線程執(zhí)行

以上兩步循環(huán)執(zhí)行，就是所謂的Event Loop，所以上述代碼里：

console.log(1)    是同步任務(wù)，進(jìn)入主線程，立即執(zhí)行
setTimeout    是異步任務(wù)，進(jìn)入Event Table，0ms后（實(shí)際時(shí)間可能有出入，見(jiàn)注文）進(jìn)入Event Queue，等待進(jìn)入主線程
for 是同步任務(wù)，進(jìn)入主線程，立即執(zhí)行
所有主線程任務(wù)執(zhí)行完后，setTimeout從Event Queue進(jìn)入主線程執(zhí)行

*注：HTML5規(guī)范規(guī)定最小延遲時(shí)間不能小于4ms，即x如果小于4，會(huì)被當(dāng)做4來(lái)處理。 不過(guò)不同瀏覽器的實(shí)現(xiàn)不一樣，比如，Chrome可以設(shè)置1ms，IE11/Edge是4ms

這就是我之前對(duì)Event Loop的理解，但是自從看了這篇文章深入理解JS引擎的執(zhí)行機(jī)制顛覆了我對(duì)Event Loop認(rèn)識(shí)三觀，看下面的代碼

Event Loop現(xiàn)在的理解

console.log("start")
setTimeout(()=>{
    console.log("setTimeout")
}, 0)
new Promise((resolve)=>{
    console.log("promise")
    resolve()
}).then(()=>{
    console.log("then")
})
console.log("end")

嘗試按照我們上面的JS執(zhí)行機(jī)制去分析：

console.log("start")是同步任務(wù)，進(jìn)入主線程，立即執(zhí)行 setTimeout是異步任務(wù)，進(jìn)入Event
Table，滿足觸發(fā)條件后進(jìn)入Event Queue
new Promise是同步任務(wù)，進(jìn)入主線程，立即執(zhí)行
.then是異步任務(wù)，進(jìn)入Event Table，滿足觸發(fā)條件后進(jìn)入Event Queue，排在Event Queue隊(duì)尾 console.log("end")是同步任務(wù)，進(jìn)入主線程，立即執(zhí)行

所以執(zhí)行結(jié)果是：start > promise > end > setTimeout > then

But但是，親自跑了代碼結(jié)果卻是：start > promise > end > then > setTimeout

對(duì)比結(jié)果發(fā)現(xiàn)，難道Event Queue里面的順序不是隊(duì)列的先進(jìn)先出的順序嗎？還是這塊執(zhí)行時(shí)有什么改變，事實(shí)就是，前面按照同步和異步任務(wù)劃分的方式并不準(zhǔn)確，那么怎么劃分才是準(zhǔn)確的呢，先看圖（轉(zhuǎn)自谷雨JavaScript 異步、棧、事件循環(huán)、任務(wù)隊(duì)列）：

咣咣咣～敲黑板，知識(shí)點(diǎn)，知識(shí)點(diǎn)，知識(shí)點(diǎn)：

Js 中，有兩類任務(wù)隊(duì)列：宏任務(wù)隊(duì)列（macro tasks）和微任務(wù)隊(duì)列（micro tasks）

宏任務(wù)隊(duì)列可以有多個(gè)，微任務(wù)隊(duì)列只有一個(gè)。那么什么任務(wù)，會(huì)分到哪個(gè)隊(duì)列呢？

宏任務(wù)：script（全局任務(wù)）, setTimeout, setInterval, setImmediate, I/O, UI rendering.
微任務(wù)：process.nextTick, Promise的then或catch, Object.observer, MutationObserver.

那么結(jié)合上面的流程圖和最初理解的執(zhí)行機(jī)制，總結(jié)了一下更為準(zhǔn)確的JS執(zhí)行機(jī)制：


取且僅取一個(gè)宏任務(wù)來(lái)執(zhí)行（第一個(gè)宏任務(wù)就是script任務(wù)）。執(zhí)行過(guò)程中判斷是同步還是異步任務(wù)，如果是同步任務(wù)就進(jìn)入主線程執(zhí)行棧中，如果是異步任務(wù)就進(jìn)入異步處理模塊，這些異步處理模塊的任務(wù)當(dāng)滿足觸發(fā)條件后，進(jìn)入任務(wù)隊(duì)列，進(jìn)入任務(wù)隊(duì)列后，按照宏任務(wù)和微任務(wù)進(jìn)行劃分，劃分完畢后，執(zhí)行下一步。
如果微任務(wù)隊(duì)列不為空，則依次取出微任務(wù)來(lái)執(zhí)行，直到微任務(wù)隊(duì)列為空（即當(dāng)前l(fā)oop所有微任務(wù)執(zhí)行完），執(zhí)行下一步。
進(jìn)入下一輪loop或更新UI渲染。

Event Loop就是循環(huán)執(zhí)行上面三步，接下來(lái)使用上面的結(jié)論分析個(gè)例子幫助理解

微任務(wù)里嵌套宏任務(wù)

console.log("第一輪");

setTimeout(() => {                    //為了便于敘述時(shí)區(qū)分，標(biāo)記為 setTimeout1
    console.log("第二輪");
    Promise.resolve().then(() => {    //為了便于敘述時(shí)區(qū)分，標(biāo)記為 then1
        console.log("A");
    })
}, 0);

setTimeout(() => {                    //為了便于敘述時(shí)區(qū)分，標(biāo)記為 setTimeout2
    console.log("第三輪");
    console.log("B");
}, 0);

new Promise((resolve)=>{              //為了便于敘述時(shí)區(qū)分，標(biāo)記為 Promise1
    console.log("C")
    resolve()
}).then(() => {                       //為了便于敘述時(shí)區(qū)分，標(biāo)記為 then2
    Promise.resolve().then(() => {    //為了便于敘述時(shí)區(qū)分，標(biāo)記為 then3
        console.log("D")
        setTimeout(() => {            //為了便于敘述時(shí)區(qū)分，標(biāo)記為 setTimeout3
            console.log("第四輪");
            console.log("E");
        }, 0);
    });
});

執(zhí)行結(jié)果：第一輪 > C > D > 第二輪 > A > 第三輪 > B > 第四輪 > E

分析：

loop1:
第一步：首先執(zhí)行全局宏任務(wù)，里面同步任務(wù)有下面兩個(gè)，都立即進(jìn)入主線程執(zhí)行完后出棧

1.console.log("第一輪")

2.Promise1

輸出 “第一輪” > “C”

異步任務(wù)有三個(gè)，分別進(jìn)入相應(yīng)的任務(wù)隊(duì)列：

1.setTimeout1，該任務(wù)按照劃分標(biāo)準(zhǔn)是 宏任務(wù)

setTimeout(() => {
    console.log("第二輪");
    Promise.resolve().then(() => {
        console.log("A");
    })
}, 0);

2.setTimeout2，該任務(wù)按照劃分標(biāo)準(zhǔn)是 宏任務(wù)

setTimeout(() => {
    console.log("第三輪");
    console.log("B");
}, 0);

3.then2，該任務(wù)按照劃分標(biāo)準(zhǔn)是 微任務(wù)

.then(() => {
    Promise.resolve().then(() => {
        console.log("D")
        setTimeout(() => {
            console.log("第四輪");
            console.log("E");
        }, 0);
    });
});

所以此時(shí)宏任務(wù)隊(duì)列為： setTimeout1，setTimeout2
 微任務(wù)隊(duì)列為： then2

第二步：loop1 微任務(wù)隊(duì)列不為空，then2出隊(duì)列并執(zhí)行，然后這個(gè)微任務(wù)里的 then3繼續(xù)進(jìn)入微任務(wù)隊(duì)列，setTimeout3進(jìn)入宏任務(wù)隊(duì)列隊(duì)尾

那么此時(shí)微任務(wù)隊(duì)列為： then3  
宏任務(wù)隊(duì)列為：setTimeout1，setTimeout2，setTimeout3

但是此時(shí)第二步并沒(méi)有完，因?yàn)槲⑷蝿?wù)隊(duì)列只要不為空，就一直執(zhí)行當(dāng)前l(fā)oop的微任務(wù)，所以從微任務(wù)隊(duì)列取出 then3 執(zhí)行輸出 “D”

此時(shí)微任務(wù)隊(duì)列為： 空  
宏任務(wù)隊(duì)列為：setTimeout1，setTimeout2，setTimeout3

到目前為止，當(dāng)前l(fā)oop的微任務(wù)對(duì)列為空，進(jìn)入下一個(gè)loop，輸出情況是“第一輪” > “C” > “D”

loop2:
第一步：在宏任務(wù)隊(duì)列隊(duì)首里取出一個(gè)任務(wù)執(zhí)行，即setTimeout1執(zhí)行輸出“第二輪”，并then1進(jìn)入微任務(wù)隊(duì)列

此時(shí)微任務(wù)隊(duì)列為： then1  
宏任務(wù)隊(duì)列為：setTimeout2，setTimeout3

第二步：loop2 微任務(wù)隊(duì)列不為空，則從微任務(wù)隊(duì)列取出then1執(zhí)行，輸出“A”

此時(shí)微任務(wù)隊(duì)列為： 空 
宏任務(wù)隊(duì)列為：setTimeout2，setTimeout3

到目前為止，當(dāng)前l(fā)oop的微任務(wù)對(duì)列為空，進(jìn)入下一個(gè)loop，輸出情況是“第一輪” > “C” > “D” > “第二輪” > “A”

loop3:
第一步：在宏任務(wù)隊(duì)列隊(duì)首里取出一個(gè)任務(wù)執(zhí)行，即setTimeout2執(zhí)行輸出“第三輪” > “B”

此時(shí)微任務(wù)隊(duì)列為： 空  
宏任務(wù)隊(duì)列為：setTimeout3

第二步：由于loop3 微任務(wù)隊(duì)列為空，則直接進(jìn)入下一輪loop，輸出情況是“第一輪” > “C” > “D” > “第二輪” > “A” > “第三輪” > “B”

loop4:
第一步：在宏任務(wù)隊(duì)列隊(duì)首里取出一個(gè)任務(wù)執(zhí)行，即setTimeout3執(zhí)行輸出“第四輪” > “E”

此時(shí)微任務(wù)隊(duì)列為： 空  
宏任務(wù)隊(duì)列為：空

第二步：由于loop4 微任務(wù)隊(duì)列為空，宏任務(wù)隊(duì)列也為空，則此次Event Loop結(jié)束，最終輸出情況是“第一輪” > “C” > “D” > “第二輪” > “A” > “第三輪” > “B” > “第四輪” > “E”

上面的整個(gè)過(guò)程就是更為準(zhǔn)確的Event Loop，下面還有個(gè)不同的例子供讀者自行嘗試

宏任務(wù)里嵌套微任務(wù)

console.log("第一輪");

setTimeout(() => {
    console.log("第二輪");
    Promise.resolve().then(() => {
        console.log("A");
    })
}, 0);

setTimeout(() => {
    console.log("第三輪");
    console.log("B");
}, 0);

new Promise((resolve) => {
    console.log("C")
    resolve()
}).then(() => {                        //注意，這個(gè)函數(shù)改動(dòng)啦
    setTimeout(() => {
        console.log("第四輪");
        console.log("E");
        Promise.resolve().then(() => {
            console.log("D")
        });
    }, 0);
});

執(zhí)行結(jié)果：第一輪 > C > 第二輪 > A > 第三輪 > B > 第四輪 > E > D

Links:

深入理解JS引擎的執(zhí)行機(jī)制
JavaScript 異步、棧、事件循環(huán)、任務(wù)隊(duì)列
JavaScript 運(yùn)行機(jī)制詳解：深入理解Event Loop
JavaScript：并發(fā)模型與Event Loop
JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop［阮一峰］