JavaScript運行機制深刻淺出學習

1、JavaScript單線程模型

JavaScript是單線程的，JavaScript只在一個線程上運行，可是瀏覽器是多線程的，典型的瀏覽器有以下線程：

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

2、JavaScript爲何是單線程的

  JavaScript之因此採用單線程 而不是多線程，因爲做爲瀏覽器腳本語言，主要用途是與用戶互動，以及操做DOM（文檔對象模型）和BOM（瀏覽器對象模型）， 而多線程須要共享資源，多線程編程經࣡常面臨鎖、狀態同步等問題。
  假定JavaScript同時有兩個線程，這兩個線程同時操做同一個DOM增刪修改操做，這時瀏覽器應該以哪一個線程操做爲準？無疑會帶來同步問題。
  既然JavaScript是單線程的，這就意味着，一次只能運行一個任務，其餘任務都必須在後面排隊等待   爲了利用多核CPU的計算能力，HTML5提出了Web Worker，它會在當 前JavaScript的執行主線程中利用Worker類新開闢一個額外的線程來加載和運行特定的JavaScript文件，但在HTML5 Web Worker中是不能操做DOM的，任何須要操做DOM的任務都須要委託給JavaScript主線程來執行，因此雖然引入HTML5 Web Worker，但仍然沒有改變JavaScript單線程的本質。

3、任務隊列

Javascript有一個main thread 主進程和call-stack（一個調用堆棧），在對一個調用堆棧中的task處理的時候，其餘的都要等着。當在執行過程當中遇到一些相似於setTimeout等異步操做的時候，會交給瀏覽器的其餘模塊(以webkit爲例，是webcore模塊)進行處理，當到達setTimeout指定的延時執行的時間以後，task(回調函數)會放入到任務隊列之中。通常不一樣的異步任務的回調函數會放入不一樣的任務隊列之中。等到調用棧中全部task執行完畢以後，接着去執行任務隊列之中的task(回調函數)。

1.異步和同步

通常而言，操做分爲：發出調用和獲得結果兩步

同步

同步是指，發出調用，但沒法當即獲得結果，須要一直等待，直到返回結果。同步任務會進入主線程, 主線程後面任務必需要等當前任務執行完才能執行，從而致使主線程阻塞。

異步

異步是指，調用以後，不能直接拿到結果，經過event loop事件處理機制，在Event Queue註冊回調函數最終拿到結果（拿到結果中間的時間能夠介入其餘任務）。

4、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執行完畢以後，執行引擎會接着看執行任務隊列中是否有須要執行的回調函數。

5、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(關閉回調) 和 那些由 timers 與 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(小任務)。

參考資料

• JS運行機制
• Node.JS事件循環
• Javascript事件循環機制
• 事件循環