前端進(jìn)階系列(八):JS執(zhí)行機(jī)制

JackJiang 發(fā)布于2019-08-23 12:25 / 3319人閱讀

摘要：一直以來，對(duì)的執(zhí)行機(jī)制都是模棱兩可，知道今天看了文章這一次，徹底弄懂執(zhí)行機(jī)制和的規(guī)范和實(shí)現(xiàn)，才對(duì)的執(zhí)行機(jī)制有了深入的理解，下面是我的學(xué)習(xí)總結(jié)。個(gè)要點(diǎn)是單線程語言是的執(zhí)行機(jī)制，為了實(shí)現(xiàn)主線程的不阻塞，就這么誕生了。

一直以來，對(duì)JS的執(zhí)行機(jī)制都是模棱兩可，知道今天看了文章—《這一次，徹底弄懂JavaScript執(zhí)行機(jī)制》和《Event Loop的規(guī)范和實(shí)現(xiàn)》，才對(duì)JS的執(zhí)行機(jī)制有了深入的理解，下面是我的學(xué)習(xí)總結(jié)。

2個(gè)要點(diǎn)

JS是單線程語言

Event Loop是JS的執(zhí)行機(jī)制，為了實(shí)現(xiàn)主線程的不阻塞，Event Loop就這么誕生了。

2個(gè)概念(結(jié)合Browser環(huán)境和Node環(huán)境)

task queue(宏任務(wù)隊(duì)列)：setTimeout、setInterval、setImmediate、I/O、UI交互事件

microtask queue(微任務(wù)隊(duì)列)：Promise、process.nextTick、MutaionObserver

看下圖：

queue可以看成一種數(shù)據(jù)結(jié)構(gòu)，用以存儲(chǔ)需要執(zhí)行的函數(shù)

setTimeout等API注冊(cè)的函數(shù)，會(huì)進(jìn)入task隊(duì)列

Promise等API注冊(cè)的函數(shù)會(huì)進(jìn)入microtask隊(duì)列

Event Loop執(zhí)行一次，從task隊(duì)列中拉出一個(gè)task執(zhí)行

Event Loop繼續(xù)檢查microtask隊(duì)列是否為空，依次執(zhí)行直至清空隊(duì)列

情景再現(xiàn)

JS的執(zhí)行邏輯，就好比只有一個(gè)窗口的銀行，客戶需要一個(gè)一個(gè)排隊(duì)辦理業(yè)務(wù)，假如現(xiàn)在排隊(duì)的有兩個(gè)人，第一個(gè)人是辦理銀行卡的，第二個(gè)人是取錢的，下面來個(gè)情景對(duì)話(這就類似上圖的event loop)：
客服：請(qǐng)問您辦理什么業(yè)務(wù)？
客戶1：辦理銀行卡。
客服：請(qǐng)先填寫一份申請(qǐng)表。下一位！(此時(shí)客戶1進(jìn)入callback queue)
客服：請(qǐng)問您辦理什么業(yè)務(wù)？
客戶2：取錢
…………
(此時(shí)客戶1已經(jīng)完成申請(qǐng)表填寫，但客戶2還未結(jié)束，那么客戶1還需等待，直到窗口前的這個(gè)客戶辦理結(jié)束)
客戶1：我填好了，給您……

## 實(shí)例練習(xí)1

console.log(1)

setTimeout(() => {
    console.log(2)
    new Promise(resolve => {
        console.log(4)
        resolve()
    }).then(() => {
        console.log(5)
    })
})

new Promise(resolve => {
    console.log(7)
    resolve()
}).then(() => {
    console.log(8)
})

setTimeout(() => {
    console.log(9)
    new Promise(resolve => {
        console.log(11)
        resolve()
    }).then(() => {
        console.log(12)
    })
})

分解動(dòng)作：

主進(jìn)程運(yùn)行的代碼首先輸出1、7；

再執(zhí)行一次microtask輸出8；

執(zhí)行了一次task輸出2，4；

再執(zhí)行一次microtask輸出5；

再執(zhí)行另一個(gè)task輸出9、11；

再執(zhí)行一次microtask輸出12

最終結(jié)果：
1、7、8、2、4、5、9、11、12

注意的：在Node環(huán)境下process.nextTick注冊(cè)的函數(shù)優(yōu)先級(jí)高于Promise,大家可以在Node環(huán)境下嘗試下面的例子：

new Promise(resolve => {
    console.log(1)
    resolve()
}).then(() => {
    console.log(2)
})
new Promise(resolve => {
    console.log(3)
    resolve()
}).then(() => {
    console.log(4)
})
process.nextTick(() => {
    console.log(5)
})

console.log(6)

執(zhí)行結(jié)果：1、3、6、5、2、4

實(shí)例練習(xí)2

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

setTimeout(() => {
    console.log(1)
}, 1)

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

有人說結(jié)果應(yīng)該是0，1，2
但正確結(jié)果是2，1，0。
因?yàn)閟etTimeout最低延遲是4ms，值得注意。

我的博客：http://blog.rnode.me

參考文章：

原文：Event Loop的規(guī)范和實(shí)現(xiàn)
地址：https://juejin.im/post/5a6155126fb9a01cb64edb45
原文：這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制
地址：https://juejin.im/post/59e85eebf265da430d571f89
原文：JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop
地址：http://www.ruanyifeng.com/blog/2014/10/event-loop.html