一慢洋、JavaScript單線程模型

JavaScript是單線程的轮纫，JavaScript只在一個線程上運行唆鸡，但是瀏覽器是多線程的池凄，典型的瀏覽器有如下線程：

• JavaScript引擎線程
• GUI渲染線程
• 瀏覽器事件觸發(fā)線程
• 瀏覽器Http請求線程

二、JavaScript為什么是單線程的

??JavaScript之所以采用單線程 而不是多線程阳藻，由于作為瀏覽器腳本語言晰奖，主要用途是與用戶互動，以及操作DOM（文檔對象模型）和BOM（瀏覽器對象模型）腥泥， 而多線程需要共享資源匾南，多線程編程經(jīng)?常面臨鎖、狀態(tài)同步等問題蛔外。

??假定JavaScript同時有兩個線程蛆楞，這兩個線程同時操作同一個DOM增刪修改操作，這時瀏覽器應(yīng)該以哪個線程操作為準夹厌？無疑會帶來同步問題豹爹。

??既然JavaScript是單線程的，這就意味著矛纹，一次只能運行一個任務(wù)臂聋，其他任務(wù)都必須在后面排隊等待
??為了利用多核CPU的計算能力，HTML5提出了Web Worker或南，它會在當(dāng) 前JavaScript的執(zhí)行主線程中利用Worker類新開辟一個額外的線程來加載和運行特定的JavaScript文件孩等，但在HTML5 Web Worker中是不能操作DOM的，任何需要操作DOM的任務(wù)都需要委托給JavaScript主線程來執(zhí)行采够，所以雖然引入HTML5 Web Worker肄方，但仍然沒有改變JavaScript單線程的本質(zhì)。

三蹬癌、任務(wù)隊列

Javascript有一個main thread 主進程和call-stack（一個調(diào)用堆棧）权她，在對一個調(diào)用堆棧中的task處理的時候虹茶，其他的都要等著。當(dāng)在執(zhí)行過程中遇到一些類似于setTimeout等異步操作的時候隅要，會交給瀏覽器的其他模塊(以webkit為例写烤，是webcore模塊)進行處理，當(dāng)?shù)竭_setTimeout指定的延時執(zhí)行的時間之后拾徙，task(回調(diào)函數(shù))會放入到任務(wù)隊列之中。一般不同的異步任務(wù)的回調(diào)函數(shù)會放入不同的任務(wù)隊列之中感局。等到調(diào)用棧中所有task執(zhí)行完畢之后尼啡，接著去執(zhí)行任務(wù)隊列之中的task(回調(diào)函數(shù))。

1.異步和同步

一般而言询微，操作分為：發(fā)出調(diào)用和得到結(jié)果兩步

同步

同步是指崖瞭，發(fā)出調(diào)用，但無法立即得到結(jié)果撑毛，需要一直等待书聚，直到返回結(jié)果。同步任務(wù)會進入主線程, 主線程后面任務(wù)必須要等當(dāng)前任務(wù)執(zhí)行完才能執(zhí)行藻雌，從而導(dǎo)致主線程阻塞雌续。

異步

異步是指，調(diào)用之后胯杭，不能直接拿到結(jié)果驯杜，通過event loop事件處理機制，在Event Queue注冊回調(diào)函數(shù)最終拿到結(jié)果（拿到結(jié)果中間的時間可以介入其他任務(wù)）做个。

四鸽心、JavaScript如何工作的，首先要理解以下幾個概念

• JS Engine(JS引擎)
• Runtime(運行上下文)
• Call Stack(調(diào)用棧)
• Event Loop(事件循環(huán))
• Callback(回調(diào))

1.JS Engine

JavaScript引擎就是用來執(zhí)行JS代碼的, 通過編譯器將代碼編譯成可執(zhí)行的機器碼讓計算機去執(zhí)行（Java中的JVM虛擬機一樣）居暖。

常見的JavaScript虛擬機（一般也把虛擬機稱為引擎）：

• Chakra(Microsoft Internet Explorer)
• Nitro/JavaScript Core (Safari)
• Carakan (Opera)
• SpiderMonkey (Firefox)
• V8 (Chrome, Chromium)

目前比較流行的就是V8引擎顽频，Chrome瀏覽器和Node.js采用的引擎就是V8引擎。
引擎主要由堆(Memory Heap)和棧(Call Stack)組成

headandstack.png

• Heap（堆） - JS引擎中給對象分配的內(nèi)存空間是放在堆中的
• Stack（棧）- 這里存儲著JavaScript正在執(zhí)行的任務(wù)太闺。每個任務(wù)被稱為幀（stack of frames）糯景。

主線程運行的時候，產(chǎn)生堆（heap）和棧（stack）,棧中的代碼調(diào)用個各種外部api省骂。

2.RunTime (運行環(huán)境)

JS在瀏覽器環(huán)境中運行時莺奸，BOM和DOM對象提供了很多相關(guān)外部接口（這些接口不是V8引擎提供的），供JS運行時調(diào)用冀宴，以及JS的事件循環(huán)(Event Loop)和事件隊列(Callback Queue)灭贷，把這些稱為RunTime。在Node.js中略贮，可以把Node的各種庫提供的API稱為RunTime

3.Call Stack

當(dāng)JavaScript代碼執(zhí)行的時候甚疟，創(chuàng)建執(zhí)行環(huán)境是很重要的仗岖，它可能是下面三種情況中的一種：

• 全局 code（Global code）——代碼第一次執(zhí)行的默認環(huán)境
• 函數(shù) code（Function code）——執(zhí)行流進入函數(shù)體
• Eval code（Eval code）——代碼在eval函數(shù)內(nèi)部執(zhí)行

JavaScript代碼首次被載入時，會創(chuàng)建一個全局上下文览妖，當(dāng)調(diào)用一個函數(shù)時轧拄，會創(chuàng)建一個函數(shù)執(zhí)行上下文。

stack2.png

在計算機系統(tǒng)中棧是一種遵從先進后出（FILO）原則的區(qū)域讽膏。函數(shù)被調(diào)用時檩电，創(chuàng)建一個新的執(zhí)行環(huán)境，就會被加入到執(zhí)行棧頂部府树，瀏覽器始終執(zhí)行當(dāng)前在棧頂部的執(zhí)行環(huán)境俐末。一旦函數(shù)完成了當(dāng)前的執(zhí)行環(huán)境，它就會被彈出棧的頂部, 把控制權(quán)返回給當(dāng)前執(zhí)行環(huán)境的下個執(zhí)行環(huán)境奄侠。

案例：瀏覽器第一次加載你的script卓箫，它默認的進了全局執(zhí)行環(huán)境，然后main執(zhí)行創(chuàng)建一個新的執(zhí)行環(huán)境垄潮，把它添加到已經(jīng)存在的執(zhí)行棧的頂部烹卒，在里面執(zhí)行Student構(gòu)造函數(shù)，執(zhí)行流進入內(nèi)部函數(shù) 將生成執(zhí)行環(huán)境添加到當(dāng)前棧頂弯洗，在Student構(gòu)造函數(shù)里旅急，又調(diào)用sayHi方法，再次把sayHi生成執(zhí)行環(huán)境壓入到棧頂牡整。當(dāng)函數(shù)執(zhí)行完一次彈出棧頂坠非。

class Student {
    constructor(age, name) {
        this.name = name;
        this.age = age;
        this.sayName(); // stack 3
    }
    sayName() {
        console.log(`my name is ${this.name}, this year age is ${this.age}`);
    }
}

function main(age, name) {
    new Student(age, name); // stack 2
}

main(23, 'John'); // stack 1

stack.gif

程序運行時，首先main()函數(shù)的執(zhí)行上下文入棧果正，再調(diào)用Student構(gòu)造函數(shù)添加到當(dāng)前棧尾炎码，在Student里再調(diào)用sayName()方法，添加到此時棧尾秋泳。最終main方法所在的位置叫棧底潦闲，sayName方法所在的位置是棧頂，層層調(diào)用迫皱，直至整個調(diào)用棧完成返回結(jié)果歉闰，最后再由棧頂依次出棧。

4.Event Loop & Callback

Event Loop 類似于一個while(true)的循環(huán)卓起，每執(zhí)行一次循環(huán)體的過程我們成為Tick和敬。每個Tick的過程就是查看是否有事件待處理，當(dāng)Call Stack里面的調(diào)用棧運行完變成空了戏阅，就取出事件及其相關(guān)的回調(diào)函數(shù)昼弟。放到調(diào)用棧中并執(zhí)行它。

loop2.png

調(diào)用棧中遇到DOM操作奕筐、ajax請求以及setTimeout等WebAPIs的時候就會交給瀏覽器內(nèi)核的其他模塊進行處理舱痘，webkit內(nèi)核在Javasctipt執(zhí)行引擎之外变骡，有一個重要的模塊是webcore模塊。對于圖中WebAPIs提到的三種API芭逝，webcore分別提供了DOM Binding塌碌、network、timer模塊來處理底層實現(xiàn)旬盯。等到這些模塊處理完這些操作的時候?qū)⒒卣{(diào)函數(shù)放入任務(wù)隊列中台妆，之后等棧中的task執(zhí)行完之后再去執(zhí)行任務(wù)隊列之中的回調(diào)函數(shù)。

runtime.png

Javascript有一個main thread 主進程和call-stack（一個調(diào)用堆棧）胖翰，在對一個調(diào)用堆棧中的task處理的時候接剩，其他的都要等著。當(dāng)在執(zhí)行過程中遇到一些類似于setTimeout等異步操作的時候泡态，會交給瀏覽器的其他模塊(以webkit為例，是webcore模塊)進行處理迂卢，當(dāng)?shù)竭_setTimeout指定的延時執(zhí)行的時間之后某弦，task(回調(diào)函數(shù))會放入到任務(wù)隊列之中。一般不同的異步任務(wù)的回調(diào)函數(shù)會放入不同的任務(wù)隊列之中而克。等到調(diào)用棧中所有task執(zhí)行完畢之后靶壮，接著去執(zhí)行任務(wù)隊列之中的task(回調(diào)函數(shù))。

代碼案例：
console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);

console.log('Bye');

以上代碼從上到下 首先執(zhí)行l(wèi)og('Hi') 它是一個普通方法立即被執(zhí)行员萍，當(dāng)遇到定時器的時候腾降，執(zhí)行引擎將其添加到調(diào)用棧，調(diào)用棧發(fā)現(xiàn)setTimeout是WebAPIs中的API碎绎，將其出棧交給瀏覽器的timer模塊進行處理螃壤，此時timer模塊去處理延遲執(zhí)行的函數(shù)，此時執(zhí)行l(wèi)og('Bye'),輸出'Bye'筋帖，當(dāng)timer模塊中延時方法規(guī)定的時間到了之后就將其放入到任務(wù)隊列之中奸晴，此時調(diào)用棧中的task已經(jīng)全部執(zhí)行完畢。

image

調(diào)用棧中的task執(zhí)行完畢之后日麸，執(zhí)行引擎會接著看執(zhí)行任務(wù)隊列中是否有需要執(zhí)行的回調(diào)函數(shù)寄啼。

五、Event Loop處理機制

1.什么是Event Loop代箭？

Event Loop（事件循環(huán)）是實現(xiàn)異步的一種機制墩划，允許 Node.js 執(zhí)行非阻塞 I/O 操作 .

大多數(shù)現(xiàn)代的系統(tǒng)內(nèi)核都是多線程的, 他們在后臺可以處理多個同時執(zhí)行的操作. 當(dāng)其中一個操作完成時, 系統(tǒng)內(nèi)核會通知Node.js, 然后與之相關(guān)的回調(diào)函數(shù)會被加入到 poll隊列 并且最終被執(zhí)行.

loop-phase.png

注意: 在Windows和Unix/Linux實現(xiàn)之間存在一點小小的差異, 但對本示例來說這并不重要. 最重要的部分都已列在這里了. 實際上有7或8個階段, 但我們關(guān)心的和Node.js實際會用到的階段都已經(jīng)列在了上面.

每個階段都有一個先進先出（FIFO）的隊列，里面存放著要執(zhí)行的回調(diào)函數(shù)嗡综，然而每個階段都有其特殊之處乙帮，當(dāng)事件循環(huán)進入了某個階段后，它可以執(zhí)行該階段特有的任意操作极景，然后進行該階段的任務(wù)隊列中的回調(diào)函數(shù)蚣旱，一直到隊列為空或已執(zhí)行回調(diào)的數(shù)量達到了允許的最大值碑幅，當(dāng)隊列為空或已執(zhí)行回調(diào)的數(shù)量達到了允許的最大值時，事件循環(huán)會進入下一個階段,階段之間會互相轉(zhuǎn)換塞绿，循環(huán)順序并不是完全固定的 沟涨，因為很多階段是由外部的事件觸發(fā)的。

2.階段概覽

• timers(定時器)：此階段執(zhí)行由setTimeout()和setInterval() 調(diào)度的回調(diào)函數(shù)

• I/O callbacks(I/O回調(diào)): 此階段會執(zhí)行幾乎所有的回調(diào)函數(shù)异吻，處理close callbacks 和那些 由times與setImmediate()調(diào)度的回調(diào)

• idle(空閑)裹赴，prepare(預(yù)備): 此階段只在內(nèi)部調(diào)用

• poll(輪詢): 檢索新的I/O事件，在恰當(dāng)?shù)臅r候會阻塞在這個階段

• check(檢查): setImmediate() 設(shè)置的回調(diào)會在此階段被調(diào)用

• close callbacks(關(guān)閉事件的回調(diào)): 諸如 socket.on('close', ...) 此類的回調(diào)在此階段被調(diào)用

在事件循環(huán)的每次運行之間诀浪，Node.js會檢查它是否在等待異步I/O或定時器, 如果沒有的話就會自動關(guān)閉.

一次事件循環(huán)就是處理以上幾個phase的過程棋返，此外還有兩個比較特殊的隊列Next Ticks Queue和Other Microtasks Queue，那另外兩個特殊的隊列是在什么時候運行的呢雷猪？

??答案: 就是在每個 phase運行完后馬上就檢查這兩個隊列有無數(shù)據(jù)睛竣，有的話就馬上執(zhí)行這兩個隊列中的數(shù)據(jù)直至隊列為空。當(dāng)這兩個隊列都為空時求摇，event loop 就會接著執(zhí)行下一個phase射沟。
這兩個隊列相比，Next Ticks Queue的權(quán)限要比Other Microtasks Queue的權(quán)限要高与境，因此Next Ticks Queue會先執(zhí)行验夯。

兩個比較特殊的隊列：

• Next Ticks Queue: 保存process.nextTick中的回調(diào)函數(shù)
• Other Microtasks Queue: 保存promise等microtask中的回調(diào)函數(shù)。

3.階段詳情

由于這些操作中的任意一個都可以調(diào)度更多的操作, 在 poll(輪詢) 階段處理的新事件被系統(tǒng)內(nèi)核加入隊列, 當(dāng)輪詢事件正在被處理時新的輪詢事件也可以被加入隊列. 因此, 長時間運行的回調(diào)函數(shù)可以讓 poll 階段運行的時間比 timer(計時器) 的閾值長得多摔刁。 看下面timer 和 poll 部分了解更多細節(jié)

timers

給一個定時器（setTimeout/setInterval）指定時間閾值時挥转，給定的回調(diào)函數(shù)有時并不是在精確的時間閾值點執(zhí)行，定時器的閾值只是說 至少在這個時間閾值點執(zhí)行共屈，然而操作系統(tǒng)調(diào)度或其他回調(diào)的執(zhí)行可能會延遲定時器回調(diào)的執(zhí)行绑谣。

注意：從技術(shù)來講， poll階段會控制定時器何時被執(zhí)行

const fs = require('fs');

// 設(shè)定一個100ms執(zhí)行的定時器
const startTime = Date.now();
setTimeout(() => {
    console.log('timeout延遲執(zhí)行時間', Date.now() - startTime);
    console.log('timer');
}, 100);

// 異步讀取文件 假設(shè)95ms完成讀取任務(wù)
fs.readFile('./1.txt', (err, data) => { // 回調(diào)函數(shù)中又耗費100毫秒
    const startTime = Date.now();
    while (Date.now() - startTime < 200) {
        // console.log(Date.now() - startTime);
    }
});

開始事件循環(huán)定時器被加入到timer中延遲執(zhí)行拗引，當(dāng)事件循環(huán)進入poll階段域仇，它有一個隊列執(zhí)行I/O操作（fs.readFile()）還未完成，poll階段將會阻塞寺擂，大約95ms 完成了I/O操作（文件讀认疚瘛），將要耗時10ms才能完成的回調(diào)加入poll隊列并執(zhí)行怔软，當(dāng)回調(diào)執(zhí)行完成垦细，poll Queue為空，此時poll會去timer階段查看最近有沒有到期的定時器挡逼，發(fā)現(xiàn)存在一個已經(jīng)超時將近195ms的定時器括改，并執(zhí)行定時器回調(diào)。在這個例子中如果不假設(shè)讀取時間家坎，定時器執(zhí)行的時間間隔大約為200ms嘱能。

注意: 為了防止 poll 階段阻塞事件循環(huán), libuv(一個實現(xiàn)了Node.js事件循環(huán)和Node.js平臺所有異步行為的C語言庫), 有一個嚴格的最大限制(這個值取決于操作系統(tǒng)), 在超過此限制后就會停止輪詢.

I/O callbacks

此階段執(zhí)行一些系統(tǒng)操作處理 I/O 異常錯誤吝梅；,如TCP的errors回調(diào)函數(shù)。

poll

poll 階段主要有兩個功能:

1.執(zhí)行時間閾值已過去的定時器回調(diào)

2.處理poll隊列中的事件

當(dāng)事件循環(huán)進入poll階段并且 當(dāng)前沒有定時器時惹骂，以下兩種情況其中一種會發(fā)生：

• 如果poll隊列不是空的苏携，事件循環(huán)會遍歷隊列并同步執(zhí)行里面的回調(diào)函數(shù)，直到隊列為空或者到達操作系統(tǒng)的限制（操作系統(tǒng)規(guī)定的連續(xù)調(diào)用回調(diào)函數(shù)的數(shù)量的最大值）

• 如果poll隊列是空的对粪，則以下兩種情況其中一種將發(fā)生：

  • 如果存在被 setImmediate() 調(diào)度的回調(diào)右冻，事件循環(huán)會結(jié)束poll階段并進入check階段執(zhí)行那些被 setImmediate() 調(diào)度了的回調(diào)。

  • 如果沒有任何被 setImmediate() 調(diào)度的回調(diào)著拭，事件循環(huán)會等待回調(diào)函數(shù)被加入隊列纱扭，一旦回調(diào)函數(shù)加入了隊列，就立即執(zhí)行它們儡遮。

一旦poll隊列變?yōu)榭杖槎辏录h(huán)就檢查是否已經(jīng)存在超時的定時器，如果存在鄙币，事件循環(huán)將繞回到timers階段執(zhí)行這些定時器回調(diào)肃叶。

check

此階段如果poll階段變?yōu)榭辙D(zhuǎn)（idle）狀態(tài)，如果存在被 setImmediate() 調(diào)度的回調(diào)爱榔，事件循環(huán)不會在poll階段阻塞等待相應(yīng)的I/O事件被环，而直接去check階段執(zhí)行 setImmediate() 函數(shù)糙及。

close callbacks

如果一個socket或句柄被突然關(guān)閉(例如 socket.destroy()), 'close'事件會在此階段被觸發(fā). 否則 'close'事件會通過 process.nextTick() 被觸發(fā).

setImmediate() vs setTimeout()

• setImmediate() 被設(shè)計為: 一旦當(dāng)前的poll階段完成就執(zhí)行回調(diào)
• setTimeout() 調(diào)度一個回調(diào)在時間閥值之后被執(zhí)行

這兩種定時器的執(zhí)行順序可能會變化, 這取決于他們是在哪個上下文中被調(diào)用的. 如果兩種定時器都是從主模塊內(nèi)被調(diào)用的, 那么回調(diào)執(zhí)行的時機就受進程性能的約束(進程也會受到系統(tǒng)中正在運行的其他應(yīng)用程序的影響).

setTimeout(function timeout() {
  console.log('timeout');
}, 0);

setImmediate(function immediate() {
  console.log('immediate');
});

但如果把setImmediate和setTimeout放到了I/O周期中详幽，此時他們的執(zhí)行順序永遠都是immediate在前，timeout在后

const fs = require('fs');
fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log('timeout');
  }, 0);
  setImmediate(() => {
    console.log('immediate');
  });
});

相比于 setTimeout(), 使用 setImmediate() 的主要優(yōu)點在于: 只要時在I/O周期內(nèi), 不管已經(jīng)存在多少個定時器, setImmediate()設(shè)置的回調(diào)總是在定時器回調(diào)之前執(zhí)行

process.nextTick()

在上面我們提到了Next Ticks Queue特殊的隊列浸锨，在這個隊列里主要存放process.nextTick這個異步函數(shù)唇聘。從技術(shù)上講該階段并不屬于事件循環(huán)的一部分，不管當(dāng)前事件循環(huán)處于哪個階段柱搜，只要當(dāng)前階段操作完畢后進入下個階段前瞬間執(zhí)行process.nextTick()

這樣一來任何時候在給定階段調(diào)用process.nextTick()時迟郎，所有傳入process.nextTick()的回調(diào)都會在事件循環(huán)繼續(xù)之前被執(zhí)行。由于允許開發(fā)者通過遞歸調(diào)用 process.nextTick() 來阻塞I/O操作, 這也使事件循環(huán)無法到達 poll 階段.

利用process.nextTick函數(shù)聪蘸，我們可以對內(nèi)部函數(shù)作異步處理可能出現(xiàn)的異常宪肖，porcess.nextTick(callback, ...args) 允許接收多個參數(shù)，callback后面的參數(shù)會作為callback的實參傳遞進來健爬，這樣就無需嵌套函數(shù)了控乾。

function apiCall(arg, callback) {
    if (typeof arg !== 'string')
        return process.nextTick(callback,
            new TypeError('argument should be string'));
    callback.call(this, arg);
};
apiCall(1, (err) => {
    console.log(err);
});

apiCall('node', (err) => {
    console.log(err);
});

setTimeout() setImmediate() process.nextTick()

• setTimeout() 在某個時間值過后盡快執(zhí)行回調(diào)函數(shù)；
• process.nextTick() 在當(dāng)前調(diào)用棧結(jié)束后就立即處理娜遵，這時也必然是“事件循環(huán)繼續(xù)進行之前”
• setImmediate() 函數(shù)是在poll階段完成后進去check階段時執(zhí)行

優(yōu)先級順序從高到低： process.nextTick() > setImmediate() > setTimeout()

注：這里只是多數(shù)情況下蜕衡，即輪詢階段（I/O 回調(diào)中）。比如之前比較 setImmediate() 和 setTimeout() 的時候就區(qū)分了所處階段/上下文设拟。

Macrotask Queue和Microtask Queue

macrotask 和 microtask 這兩個概念, 表示異步任務(wù)的兩種分類慨仿。在掛起任務(wù)時久脯，JS 引擎會將所有任務(wù)按照類別分到這兩個隊列中，首先在 macrotask 的隊列（這個隊列也被叫做 task queue）中取出第一個任務(wù)镰吆，執(zhí)行完畢后取出 microtask 隊列中的所有任務(wù)順序執(zhí)行帘撰；之后再取 macrotask 任務(wù)，周而復(fù)始鼎姊，直至兩個隊列的任務(wù)都取完骡和。

macrotask(宏任務(wù)、大任務(wù)):

• script（整體代碼）
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

microtask(微任務(wù)相寇、小任務(wù)):

• promise
• Object.observe
• process.nextTick
• MutationObserver

每個事件循環(huán)只處理一個macrotask(大任務(wù)) 慰于，但會處理完所有microtask(小任務(wù))。

參考資料

• JS運行機制
• Node.JS事件循環(huán)
• Javascript事件循環(huán)機制
• 事件循環(huán)