js的執(zhí)行機制

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

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

js在哪執(zhí)行

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

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

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

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

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

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

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

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

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

異步執(zhí)行機制?

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

    Event Loop的概念

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

node中異步

異步任務(wù)分類

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

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

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

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

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

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

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)永遠先執(zhí)行,因為readFile的回調(diào)執(zhí)行是在 poll 階段，所以接下來的 check 階段會先執(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機制,但具體到nextTick比較特別,有一個Tick-Task-Queue專門用于存放process.nextTick的任務(wù),且有調(diào)用深度限制,上限是1000。js引擎執(zhí)行 Macro Task 任務(wù)結(jié)束后,會先遍歷執(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);
    }
}

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

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

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

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