js的執(zhí)行機(jī)制

guyan0319 發(fā)布于2019-08-22 13:55 / 1315人閱讀

摘要：異步執(zhí)行機(jī)制異步執(zhí)行相對(duì)來說復(fù)雜些所以詳細(xì)描述下關(guān)鍵是在各種使用情況下執(zhí)行順序問題在此就需要引入一個(gè)概念。在達(dá)到這個(gè)下限時(shí)間后執(zhí)行和這些定時(shí)器設(shè)定的回調(diào)。執(zhí)行設(shè)定的回調(diào)。

js在哪執(zhí)行

js的執(zhí)行引擎基于v8(c++編寫),在chrome和node中都有應(yīng)用,執(zhí)行時(shí)有以下兩部分構(gòu)成

內(nèi)存堆(內(nèi)存分配)
調(diào)用棧(代碼執(zhí)行)

上述兩部分的聯(lián)系就是代碼在調(diào)用棧中執(zhí)行,執(zhí)行過程中會(huì)存取一些對(duì)象在內(nèi)存堆上。

我們寫的js代碼經(jīng)過js引擎(解釋器)轉(zhuǎn)化為高效的機(jī)器碼,現(xiàn)在的v8引擎由TurboFan和Ignition兩部分構(gòu)成,其中Ignition是解釋器,而TurboFan主要對(duì)代碼做些優(yōu)化,以提高執(zhí)行性能。

基于執(zhí)行引擎的執(zhí)行原理在代碼層面我們可以做些優(yōu)化,可以參考我之前的一篇文章

js如何執(zhí)行 js同步執(zhí)行

js按照代碼順序執(zhí)行,在棧上分配執(zhí)行空間,按照調(diào)用順序,會(huì)有出棧入棧等各種情況,比較好分析,唯一值的說的地方就是js只有一個(gè)主線程,?？臻g有限,如果遞歸執(zhí)行過深會(huì)發(fā)生溢出,所以在編寫代碼層面需要注意這種情況。

js異步執(zhí)行 為什么要有異步?

同步單線程代碼處理起來方便,代碼表達(dá)也容易,更符合我們的思維方式,為什么還會(huì)出現(xiàn)異步呢?
因?yàn)橥綍?huì)發(fā)生阻塞,在現(xiàn)在這個(gè)高并發(fā)時(shí)代,不能很好的處理海量請(qǐng)求,同時(shí)也不能充分利用硬件資源(想想cpu和io之間處理速度差異你就深有體會(huì))。
但是為什么不多線程呢,例如java,主要是單個(gè)線程上運(yùn)行代碼相對(duì)來多線程來說說容易寫，不必考慮在多線程環(huán)境中出現(xiàn)的復(fù)雜場(chǎng)景，例如死鎖等等。

異步執(zhí)行機(jī)制?

異步執(zhí)行相對(duì)來說復(fù)雜些,所以詳細(xì)描述下,關(guān)鍵是在各種使用情況下執(zhí)行順序問題,在此就需要引入一個(gè)概念-->Event Loop。結(jié)合下面這幅圖進(jìn)行大致說明下:

    Event Loop的概念

所有任務(wù)在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack),上圖stack區(qū)域所示。
執(zhí)行過程中可能會(huì)調(diào)用異步api,其中Background Threads負(fù)責(zé)具體異步任務(wù)執(zhí)行,結(jié)束后將宏任務(wù)回調(diào)邏輯放入task queue中,微任務(wù)回調(diào)邏輯放入micro task隊(duì)列中。
主線程執(zhí)行完畢,檢查microtask隊(duì)列是否為空,會(huì)執(zhí)行到隊(duì)列空為止
從宏任務(wù)隊(duì)列中取出一個(gè)在執(zhí)行,執(zhí)行完后,檢查并取出執(zhí)行microtask隊(duì)列的任務(wù),然后不斷重復(fù)這個(gè)步驟,對(duì)于這整個(gè)循環(huán)過程,一個(gè)對(duì)應(yīng)的描述名詞就叫做event loop。

node中異步

異步任務(wù)分類

macrotask類型包括 script整體代碼,setTimeout,setInterval,setImmediate,I/O……

microtask類型包括 Promise process.nextTick Object.observe MutaionObserver……

node中event loop各個(gè)階段的操作如下圖所示

說明,上圖中每個(gè)盒子表示了event loop的一個(gè)階段,每個(gè)階段執(zhí)行完畢后,或者執(zhí)行的回調(diào)數(shù)量達(dá)到上限后，event loop會(huì)進(jìn)入下個(gè)階段。

timers: 在達(dá)到這個(gè)下限時(shí)間后執(zhí)行setTimeout()和setInterval()這些定時(shí)器設(shè)定的回調(diào)。
I/O callbacks: 執(zhí)行除了close回調(diào)，timer的回調(diào)，和setImmediate()的回調(diào),例如操作系統(tǒng)回調(diào)tcp錯(cuò)誤。
idle, prepare: 僅內(nèi)部使用。
poll: 獲取新的I/O事件,例如socket的讀寫事件；node會(huì)在適當(dāng)條件下阻塞在這里,如果poll階段空閑,才會(huì)進(jìn)入下一階段。
check: 執(zhí)行setImmediate()設(shè)定的回調(diào)。
close callbacks: 執(zhí)行比如socket.on("close", ...)的回調(diào)。

下面結(jié)合一些具體例子進(jìn)行說明

require("fs").readFile("./case1.js", () => {
    setTimeout(() => {
        console.log("setTimeout in poll phase");
    });
    setImmediate(() => {
        console.log("setImmediate in poll phase");
    });
});

輸出結(jié)果是:
setImmediate in poll phase
setTimeout in poll phase
Process finished with exit code 0

說明 setImmediate的回調(diào)永遠(yuǎn)先執(zhí)行,因?yàn)閞eadFile的回調(diào)執(zhí)行是在 poll 階段，所以接下來的 check 階段會(huì)先執(zhí)行 setImmediate 的回調(diào)。

setTimeout(() => console.log("setTimeout1"), 1000);
setTimeout(() => {
    console.log("setTimeout2");
    process.nextTick(() => console.log("nextTick1"));
}, 0);
setTimeout(() => console.log("setTimeout3"), 0);

process.nextTick(() => console.log("nextTick2"));
process.nextTick(() => {
    process.nextTick(console.log.bind(console, "nextTick3"));
});
 Promise.resolve("xxx").then(() => {
    console.log("promise");
    testPromise();
});
process.nextTick(() => console.log("nextTick4"));

結(jié)果是:

nextTick2
nextTick4
nextTick3
promise
setTimeout2
setTimeout3
nextTick1
setTimeout1

在描述什么是event loop中,大概描述了microtask機(jī)制,但具體到nextTick比較特別,有一個(gè)Tick-Task-Queue專門用于存放process.nextTick的任務(wù),且有調(diào)用深度限制,上限是1000。js引擎執(zhí)行 Macro Task 任務(wù)結(jié)束后,會(huì)先遍歷執(zhí)行Tick-Task-Queue的所有任務(wù),緊接著再遍歷 Micro Task Queue 的所有任務(wù)。具體執(zhí)行邏輯可以下面代碼表示。

for (macroTask of macroTaskQueue) {

    // 1. Handle current MACRO-TASK
    handleMacroTask();

    // 2. Handle all NEXT-TICK
    for (nextTick of nextTickQueue) {
        handleNextTick(nextTick);
    }

    // 3. Handle all MICRO-TASK
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}

所以才會(huì)先輸出process.nextTick然后才會(huì)是promise,其它的輸出順序不在贅述,前面講event-loop機(jī)制時(shí)已經(jīng)說明了。根據(jù)上面代碼表述的執(zhí)行邏輯,很顯然可以得到下面的個(gè)結(jié)論,當(dāng)遞歸調(diào)用時(shí)會(huì)發(fā)生死循環(huán),而宏任務(wù)就不會(huì)。

testPromise();
function testPromise() {
    promise = Promise.resolve("xxx").then(() => {
        console.log("promise");
        testPromise();
    });
}
//將之前步驟的promise任務(wù)換成這個(gè),setTimeout2以及之后的輸出永遠(yuǎn)沒機(jī)會(huì)出來,類比到nextTick也是這種效果

看了一些書,參考了很多資料,將自己學(xué)習(xí)的東西,理解后在輸出,希望大家辯證的看待,有空的話接下來研究一下源碼,畢竟通過demo驗(yàn)證結(jié)論的說服力沒有源碼來的那么直接。

參考鏈接
https://jakearchibald.com/201...
https://blog.sessionstack.com...
https://cnodejs.org/topic/592...
https://developer.mozilla.org...
https://nodejs.org/en/docs/gu...