一、JavaScript單線程模型
JavaScript是單線程的，JavaScript只在一個線程上運行，但是瀏覽器是多線程的，典型的瀏覽器有如下線程：
- JavaScript引擎線程
- GUI渲染線程
- 瀏覽器事件觸發線程
- 瀏覽器Http請求線程
二、JavaScript為什么是單線程的
??JavaScript之所以采用單線程 而不是多線程，由于作為瀏覽器腳本語言，主要用途是與用戶互動，以及操作DOM（文檔對象模型）和BOM（瀏覽器對象模型）， 而多線程需要共享資源，多線程編程經?常面臨鎖、狀態同步等問題。
??假定JavaScript同時有兩個線程，這兩個線程同時操作同一個DOM增刪修改操作，這時瀏覽器應該以哪個線程操作為準？無疑會帶來同步問題。
??既然JavaScript是單線程的，這就意味著，一次只能運行一個任務，其他任務都必須在后面排隊等待
??為了利用多核CPU的計算能力，HTML5提出了Web Worker，它會在當 前JavaScript的執行主線程中利用Worker類新開辟一個額外的線程來加載和運行特定的JavaScript文件，但在HTML5 Web Worker中是不能操作DOM的，任何需要操作DOM的任務都需要委托給JavaScript主線程來執行，所以雖然引入HTML5 Web Worker，但仍然沒有改變JavaScript單線程的本質。
三、任務隊列
Javascript有一個main thread 主進程和call-stack（一個調用堆棧），在對一個調用堆棧中的task處理的時候，其他的都要等著。當在執行過程中遇到一些類似于setTimeout等異步操作的時候，會交給瀏覽器的其他模塊(以webkit為例，是webcore模塊)進行處理，當到達setTimeout指定的延時執行的時間之后，task(回調函數)會放入到任務隊列之中。一般不同的異步任務的回調函數會放入不同的任務隊列之中。等到調用棧中所有task執行完畢之后，接著去執行任務隊列之中的task(回調函數)。
1.異步和同步
一般而言，操作分為：發出調用和得到結果兩步
同步
同步是指，發出調用，但無法立即得到結果，需要一直等待，直到返回結果。同步任務會進入主線程, 主線程后面任務必須要等當前任務執行完才能執行，從而導致主線程阻塞。
異步
異步是指，調用之后，不能直接拿到結果，通過event loop事件處理機制，在Event Queue注冊回調函數最終拿到結果（拿到結果中間的時間可以介入其他任務）。
四、JavaScript如何工作的，首先要理解以下幾個概念
- JS Engine(JS引擎)
- Runtime(運行上下文)
- Call Stack(調用棧)
- Event Loop(事件循環)
- Callback(回調)
1.JS Engine
JavaScript引擎就是用來執行JS代碼的, 通過編譯器將代碼編譯成可執行的機器碼讓計算機去執行（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)組成
- Heap（堆） - JS引擎中給對象分配的內存空間是放在堆中的
- Stack（棧）- 這里存儲著JavaScript正在執行的任務。每個任務被稱為幀（stack of frames）。
主線程運行的時候，產生堆（heap）和棧（stack）,棧中的代碼調用個各種外部api。
2.RunTime (運行環境)
JS在瀏覽器環境中運行時，BOM和DOM對象提供了很多相關外部接口（這些接口不是V8引擎提供的），供JS運行時調用，以及JS的事件循環(Event Loop)和事件隊列(Callback Queue)，把這些稱為RunTime。在Node.js中，可以把Node的各種庫提供的API稱為RunTime
3.Call Stack
當JavaScript代碼執行的時候，創建執行環境是很重要的，它可能是下面三種情況中的一種：
- 全局 code（Global code）——代碼第一次執行的默認環境
- 函數 code（Function code）——執行流進入函數體
- Eval code（Eval code）——代碼在eval函數內部執行
JavaScript代碼首次被載入時，會創建一個全局上下文，當調用一個函數時，會創建一個函數執行上下文。
在計算機系統中棧是一種遵從先進后出（FILO）原則的區域。函數被調用時，創建一個新的執行環境，就會被加入到執行棧頂部，瀏覽器始終執行當前在棧頂部的執行環境。一旦函數完成了當前的執行環境，它就會被彈出棧的頂部, 把控制權返回給當前執行環境的下個執行環境。
案例：瀏覽器第一次加載你的script，它默認的進了全局執行環境，然后main執行創建一個新的執行環境，把它添加到已經存在的執行棧的頂部，在里面執行Student構造函數，執行流進入內部函數 將生成執行環境添加到當前棧頂，在Student構造函數里，又調用sayHi方法，再次把sayHi生成執行環境壓入到棧頂。當函數執行完一次彈出棧頂。
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
程序運行時，首先main()函數的執行上下文入棧，再調用Student構造函數添加到當前棧尾，在Student里再調用sayName()方法，添加到此時棧尾。最終main方法所在的位置叫棧底，sayName方法所在的位置是棧頂，層層調用，直至整個調用棧完成返回結果，最后再由棧頂依次出棧。
4.Event Loop & Callback
Event Loop 類似于一個while(true)的循環，每執行一次循環體的過程我們成為Tick。每個Tick的過程就是查看是否有事件待處理，當Call Stack里面的調用棧運行完變成空了，就取出事件及其相關的回調函數。放到調用棧中并執行它。
調用棧中遇到DOM操作、ajax請求以及setTimeout等WebAPIs的時候就會交給瀏覽器內核的其他模塊進行處理，webkit內核在Javasctipt執行引擎之外，有一個重要的模塊是webcore模塊。對于圖中WebAPIs提到的三種API，webcore分別提供了DOM Binding、network、timer模塊來處理底層實現。等到這些模塊處理完這些操作的時候將回調函數放入任務隊列中，之后等棧中的task執行完之后再去執行任務隊列之中的回調函數。
Javascript有一個main thread 主進程和call-stack（一個調用堆棧），在對一個調用堆棧中的task處理的時候，其他的都要等著。當在執行過程中遇到一些類似于setTimeout等異步操作的時候，會交給瀏覽器的其他模塊(以webkit為例，是webcore模塊)進行處理，當到達setTimeout指定的延時執行的時間之后，task(回調函數)會放入到任務隊列之中。一般不同的異步任務的回調函數會放入不同的任務隊列之中。等到調用棧中所有task執行完畢之后，接著去執行任務隊列之中的task(回調函數)。
代碼案例：
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
以上代碼從上到下 首先執行log('Hi') 它是一個普通方法立即被執行，當遇到定時器的時候，執行引擎將其添加到調用棧，調用棧發現setTimeout是WebAPIs中的API，將其出棧交給瀏覽器的timer模塊進行處理，此時timer模塊去處理延遲執行的函數，此時執行log('Bye'),輸出'Bye'，當timer模塊中延時方法規定的時間到了之后就將其放入到任務隊列之中，此時調用棧中的task已經全部執行完畢。
調用棧中的task執行完畢之后，執行引擎會接著看執行任務隊列中是否有需要執行的回調函數。
五、Event Loop處理機制
1.什么是Event Loop？
Event Loop（事件循環）是實現異步的一種機制，允許 Node.js 執行非阻塞 I/O 操作 .
大多數現代的系統內核都是多線程的, 他們在后臺可以處理多個同時執行的操作. 當其中一個操作完成時, 系統內核會通知Node.js, 然后與之相關的回調函數會被加入到 poll隊列 并且最終被執行.
注意: 在Windows和Unix/Linux實現之間存在一點小小的差異, 但對本示例來說這并不重要. 最重要的部分都已列在這里了. 實際上有7或8個階段, 但我們關心的和Node.js實際會用到的階段都已經列在了上面.
每個階段都有一個先進先出（FIFO）的隊列，里面存放著要執行的回調函數，然而每個階段都有其特殊之處，當事件循環進入了某個階段后，它可以執行該階段特有的任意操作，然后進行該階段的任務隊列中的回調函數，一直到隊列為空或已執行回調的數量達到了允許的最大值，當隊列為空或已執行回調的數量達到了允許的最大值時，事件循環會進入下一個階段,階段之間會互相轉換，循環順序并不是完全固定的 ，因為很多階段是由外部的事件觸發的。
2.階段概覽
timers(定時器)：此階段執行由setTimeout()和setInterval() 調度的回調函數
I/O callbacks(I/O回調): 此階段會執行幾乎所有的回調函數，處理close callbacks 和那些 由times與setImmediate()調度的回調
idle(空閑)，prepare(預備): 此階段只在內部調用
poll(輪詢): 檢索新的I/O事件，在恰當的時候會阻塞在這個階段
check(檢查): setImmediate() 設置的回調會在此階段被調用
close callbacks(關閉事件的回調): 諸如 socket.on('close', ...) 此類的回調在此階段被調用
在事件循環的每次運行之間，Node.js會檢查它是否在等待異步I/O或定時器, 如果沒有的話就會自動關閉.
一次事件循環就是處理以上幾個phase的過程，此外還有兩個比較特殊的隊列Next Ticks Queue和Other Microtasks Queue，那另外兩個特殊的隊列是在什么時候運行的呢？
??答案: 就是在每個 phase運行完后馬上就檢查這兩個隊列有無數據，有的話就馬上執行這兩個隊列中的數據直至隊列為空。當這兩個隊列都為空時，event loop 就會接著執行下一個phase。
這兩個隊列相比，Next Ticks Queue的權限要比Other Microtasks Queue的權限要高，因此Next Ticks Queue會先執行。
兩個比較特殊的隊列：
- Next Ticks Queue: 保存process.nextTick中的回調函數
- Other Microtasks Queue: 保存promise等microtask中的回調函數。
3.階段詳情
由于這些操作中的任意一個都可以調度更多的操作, 在 poll(輪詢) 階段處理的新事件被系統內核加入隊列, 當輪詢事件正在被處理時新的輪詢事件也可以被加入隊列. 因此, 長時間運行的回調函數可以讓 poll 階段運行的時間比 timer(計時器) 的閾值長得多。 看下面timer 和 poll 部分了解更多細節
timers
給一個定時器（setTimeout/setInterval）指定時間閾值時，給定的回調函數有時并不是在精確的時間閾值點執行，定時器的閾值只是說 至少在這個時間閾值點執行，然而操作系統調度或其他回調的執行可能會延遲定時器回調的執行。
注意：從技術來講， poll階段會控制定時器何時被執行
const fs = require('fs');
// 設定一個100ms執行的定時器
const startTime = Date.now();
setTimeout(() => {
console.log('timeout延遲執行時間', Date.now() - startTime);
console.log('timer');
}, 100);
// 異步讀取文件 假設95ms完成讀取任務
fs.readFile('./1.txt', (err, data) => { // 回調函數中又耗費100毫秒
const startTime = Date.now();
while (Date.now() - startTime < 200) {
// console.log(Date.now() - startTime);
}
});
開始事件循環定時器被加入到timer中延遲執行，當事件循環進入poll階段，它有一個隊列執行I/O操作（fs.readFile()）還未完成，poll階段將會阻塞，大約95ms 完成了I/O操作（文件讀取），將要耗時10ms才能完成的回調加入poll隊列并執行，當回調執行完成，poll Queue為空，此時poll會去timer階段查看最近有沒有到期的定時器，發現存在一個已經超時將近195ms的定時器，并執行定時器回調。在這個例子中如果不假設讀取時間，定時器執行的時間間隔大約為200ms。
注意: 為了防止 poll 階段阻塞事件循環, libuv(一個實現了Node.js事件循環和Node.js平臺所有異步行為的C語言庫), 有一個嚴格的最大限制(這個值取決于操作系統), 在超過此限制后就會停止輪詢.
I/O callbacks
此階段執行一些系統操作處理 I/O 異常錯誤；,如TCP的errors回調函數。
poll
poll 階段主要有兩個功能:
1.執行時間閾值已過去的定時器回調
2.處理poll隊列中的事件
當事件循環進入poll階段并且 當前沒有定時器時，以下兩種情況其中一種會發生：
如果poll隊列不是空的，事件循環會遍歷隊列并同步執行里面的回調函數，直到隊列為空或者到達操作系統的限制（操作系統規定的連續調用回調函數的數量的最大值）
-
如果poll隊列是空的，則以下兩種情況其中一種將發生：
如果存在被 setImmediate() 調度的回調，事件循環會結束poll階段并進入check階段執行那些被 setImmediate() 調度了的回調。
如果沒有任何被 setImmediate() 調度的回調，事件循環會等待回調函數被加入隊列，一旦回調函數加入了隊列，就立即執行它們。
一旦poll隊列變為空，事件循環就檢查是否已經存在超時的定時器，如果存在，事件循環將繞回到timers階段執行這些定時器回調。
check
此階段如果poll階段變為空轉（idle）狀態，如果存在被 setImmediate() 調度的回調，事件循環不會在poll階段阻塞等待相應的I/O事件，而直接去check階段執行 setImmediate() 函數。
close callbacks
如果一個socket或句柄被突然關閉(例如 socket.destroy()), 'close'事件會在此階段被觸發. 否則 'close'事件會通過 process.nextTick() 被觸發.
setImmediate() vs setTimeout()
- setImmediate() 被設計為: 一旦當前的poll階段完成就執行回調
- setTimeout() 調度一個回調在時間閥值之后被執行
這兩種定時器的執行順序可能會變化, 這取決于他們是在哪個上下文中被調用的. 如果兩種定時器都是從主模塊內被調用的, 那么回調執行的時機就受進程性能的約束(進程也會受到系統中正在運行的其他應用程序的影響).
setTimeout(function timeout() {
console.log('timeout');
}, 0);
setImmediate(function immediate() {
console.log('immediate');
});
但如果把setImmediate和setTimeout放到了I/O周期中，此時他們的執行順序永遠都是immediate在前，timeout在后
const fs = require('fs');
fs.readFile(__filename, () => {
setTimeout(() => {
console.log('timeout');
}, 0);
setImmediate(() => {
console.log('immediate');
});
});
相比于 setTimeout(), 使用 setImmediate() 的主要優點在于: 只要時在I/O周期內, 不管已經存在多少個定時器, setImmediate()設置的回調總是在定時器回調之前執行
process.nextTick()
在上面我們提到了Next Ticks Queue特殊的隊列，在這個隊列里主要存放process.nextTick這個異步函數。從技術上講該階段并不屬于事件循環的一部分，不管當前事件循環處于哪個階段，只要當前階段操作完畢后進入下個階段前瞬間執行process.nextTick()
這樣一來任何時候在給定階段調用process.nextTick()時，所有傳入process.nextTick()的回調都會在事件循環繼續之前被執行。由于允許開發者通過遞歸調用 process.nextTick() 來阻塞I/O操作, 這也使事件循環無法到達 poll 階段.
利用process.nextTick函數，我們可以對內部函數作異步處理可能出現的異常，porcess.nextTick(callback, ...args) 允許接收多個參數，callback后面的參數會作為callback的實參傳遞進來，這樣就無需嵌套函數了。
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() 在某個時間值過后盡快執行回調函數；
- process.nextTick() 在當前調用棧結束后就立即處理，這時也必然是“事件循環繼續進行之前”
- setImmediate() 函數是在poll階段完成后進去check階段時執行
優先級順序從高到低： process.nextTick() > setImmediate() > setTimeout()
注：這里只是多數情況下，即輪詢階段（I/O 回調中）。比如之前比較 setImmediate() 和 setTimeout() 的時候就區分了所處階段/上下文。
Macrotask Queue和Microtask Queue
macrotask 和 microtask 這兩個概念, 表示異步任務的兩種分類。在掛起任務時，JS 引擎會將所有任務按照類別分到這兩個隊列中，首先在 macrotask 的隊列（這個隊列也被叫做 task queue）中取出第一個任務，執行完畢后取出 microtask 隊列中的所有任務順序執行；之后再取 macrotask 任務，周而復始，直至兩個隊列的任務都取完。
macrotask(宏任務、大任務):
- script（整體代碼）
- setTimeout
- setInterval
- setImmediate
- I/O
- UI rendering
microtask(微任務、小任務):
- promise
- Object.observe
- process.nextTick
- MutationObserver
每個事件循環只處理一個macrotask(大任務) ，但會處理完所有microtask(小任務)。
