先看段代碼:
console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve, reject) { console.log(3); resolve(); console.log(4); }).then(function () { console.log(5); }); }); function fn() { console.log(6); setTimeout(function () { console.log(7); }, 50); } new Promise(function (resolve, reject) { console.log(8); resolve(); console.log(9); }).then(function () { console.log(10); }); fn(); console.log(11); // 以下代碼需要在 node 環境中執行 process.nextTick(function () { console.log(12); }); setImmediate(function () { console.log(13); });
思考一下,能給出準確的輸出順序嗎?
下面我們一個一個的來了解 Event Loop 相關的知識點,最後再一步一步分析出本段代碼最後的輸出順序。
JavaScript是單線程
首先我們先了解下進程和線程的概念和關係:
- 進程: 運行的程序就是一個進程,比如你正在運行的瀏覽器,它會有一個進程。
- 線程: 程序中獨立運行的代碼段。一個進程 由單個或多個 線程 組成,線程是負責執行代碼的。
我們都知道 JavaScript 是單線程的,那麼既然有單線程就有多線程,首先看看單線程與多線程的區別:
- 單線程: 從頭執行到尾,一行一行執行,如果其中一行代碼報錯,那麼剩下代碼將不再執行。同時容易代碼阻塞。
- 多線程: 代碼運行的環境不同,各線程獨立,互不影響,避免阻塞。
那爲什麼JavaScript是單線程的呢?
JavaScript 的單線程,與它的用途有關。作爲瀏覽器腳本語言,JavaScript 的主要用途是與用戶互動,以及操作 DOM。這決定了它只能是單線程,否則會帶來很複雜的同步問題。比如,假定JavaScript同時有兩個線程,一個線程在某個 DOM 節點上添加內容,另一個線程刪除了這個節點,這時瀏覽器應該以哪個線程爲準呢?
所以,爲了避免複雜性,從一誕生,JavaScript 就是單線程,這已經成了這門語言的核心特徵,將來也不會改變。
爲了利用多核 CPU 的計算能力,HTML5 提出 Web Worker 標準,允許 JavaScript 腳本創建多個線程,但是子線程完全受主線程控制,且不得操作 DOM。所以,這個新標準並沒有改變 JavaScript 單線程的本質。
執行棧、任務隊列
上圖中,主線程運行的時候,產生堆(heap)和棧(stack),棧中的代碼調用各種外部API,它們在”任務隊列”中加入各種事件(DOM Event,ajax,setTimeout…)。只要棧中的代碼執行完畢,主線程就會去讀取任務隊列,依次執行那些事件所對應的回調函數。
堆(heap):
對象被分配在一個堆中,即用以表示一個大部分非結構化的內存區域。
執行棧(stack):
運行同步代碼。執行棧中的代碼(同步任務),總是在讀取”任務隊列”(異步任務)之前執行。
任務隊列(callback queue):
“任務隊列”是一個事件的隊列(也可以理解成消息的隊列),IO設備完成一項任務,就在”任務隊列”中添加一個事件,表示相關的異步任務可以進入”執行棧”了。主線程讀取”任務隊列”,就是讀取裏面有哪些事件。
“任務隊列”中的事件,除了IO設備的事件以外,還包括一些用戶產生的事件(比如鼠標點擊、頁面滾動等等)。只要指定過回調函數,這些事件發生時就會進入”任務隊列”,等待主線程讀取。
所謂”回調函數”(callback),就是那些會被主線程掛起來的代碼。異步任務必須指定回調函數,當主線程開始執行異步任務,就是執行對應的回調函數。
“任務隊列”是一個先進先出的數據結構,排在前面的事件,優先被主線程讀取。主線程的讀取過程基本上是自動的,只要執行棧一清空,”任務隊列”上第一位的事件就自動進入主線程。但是,由於存在後文提到的”定時器”功能,主線程首先要檢查一下執行時間,某些事件只有到了規定的時間,才能返回主線程。
同步任務、異步任務、宏任務、微任務
單線程就意味着,所有任務需要排隊,前一個任務結束,纔會執行後一個任務。如果前一個任務耗時很長,後一個任務就不得不一直等着。
如果排隊是因爲計算量大,CPU忙不過來,倒也算了,但是很多時候CPU是閒着的,因爲IO設備(輸入輸出設備)很慢(比如Ajax操作從網絡讀取數據),不得不等着結果出來,再往下執行。
JavaScript語言的設計者意識到,這時主線程完全可以不管IO設備,掛起處於等待中的任務,先運行排在後面的任務。等到IO設備返回了結果,再回過頭,把掛起的任務繼續執行下去。
於是,廣義上將 JavaScript 所有任務可以分成兩種,一種是同步任務(synchronous),另一種是異步任務(asynchronous)。同步任務指的是,在主線程上排隊執行的任務,只有前一個任務執行完畢,才能執行後一個任務;異步任務指的是,不進入主線程、而進入”任務隊列”(task queue)的任務,只有”任務隊列”通知主線程,某個異步任務可以執行了,該任務纔會進入主線程執行。
具體來說,異步執行的運行機制如下(同步執行也是如此,因爲它可以被視爲沒有異步任務的異步執行):
(1)所有同步任務都在主線程上執行,形成一個"執行棧"(execution context stack); (2)主線程之外,還存在一個"任務隊列"(task queue)。只要異步任務有了運行結果,就在"任務隊列"之中放置一個事件; (3)一旦"執行棧"中的所有同步任務執行完畢,系統就會取出"任務隊列"中事件所對應的回調函數進入"執行棧",開始執行; (4)主線程不斷重複上面的第三步。
除了廣義上的定義,我們可以將任務進行更精細的定義,分爲宏任務與微任務:
- 宏任務(macro-task): 包括整體代碼script,setTimeout,setInterval,ajax,dom操作
- 微任務(micro-task): Promise
具體來說,宏任務與微任務執行的運行機制如下:
(1)首先,將"執行棧"最開始的所有同步代碼(宏任務)執行完成; (2)檢查是否有微任務,如有則執行所有的微任務; (3)取出"任務隊列"中事件所對應的回調函數(宏任務)進入"執行棧"並執行完成; (4)再檢查是否有微任務,如有則執行所有的微任務; (5)主線程不斷重複上面的(3)(4)步。
以上兩種運行機制,主線程都從”任務隊列”中讀取事件,這個過程是循環不斷的,所以整個的這種運行機制又稱爲 Event Loop(事件循環)。
setTimeout()、setInterval()
setTimeout() 和 setInterval() 這兩個函數,它們的內部運行機制完全一樣,區別在於前者指定的代碼是一次性執行,後者則爲反覆執行。
setTimeout() 和 setInterval() 產生的任務是 異步任務,也屬於 宏任務。
setTimeout() 接受兩個參數,第一個是回調函數,第二個是推遲執行的毫秒數。setInterval() 接受兩個參數,第一個是回調函數,第二個是反覆執行的毫秒數。
如果將第二個參數設置爲0或者不設置,意思 並不是立即執行,而是指定某個任務在主線程最早可得的空閒時間執行,也就是說,儘可能早得執行。它在”任務隊列”的尾部添加一個事件,因此要等到同步任務和”任務隊列”現有的事件都處理完,纔會得到執行。
所以說,setTimeout() 和 setInterval() 第二個參數設置的時間並不是絕對的,它需要根據當前代碼最終執行的時間來確定的,簡單來說,如果當前代碼執行的時間(如執行200ms)超出了推遲執行(setTimeout(fn, 100))或反覆執行的時間(setInterval(fn, 100)),那麼setTimeout(fn, 100) 和 setTimeout(fn, 0) 也就沒有區別了,setInterval(fn, 100) 和 setInterval(fn, 0) 也就沒有區別了。
Promise
Promise 相對來說就比較特殊了,在 new Promise() 中傳入的回調函數是會 立即執行的,但是它的 then() 方法是在 執行棧之後,任務隊列之前 執行的,它屬於 微任務。
process.nextTick
process.nextTick 是 Node.js 提供的一個與”任務隊列”有關的方法,它產生的任務是放在 執行棧的尾部,並不屬於 宏任務 和 微任務,因此它的任務 總是發生在所有異步任務之前。
setImmediate
setImmediate 是 Node.js 提供的另一個與”任務隊列”有關的方法,它產生的任務追加到”任務隊列”的尾部,它和 setTimeout(fn, 0) 很像,但優先級都是 setTimeout 優先於 setImmediate。
有時候,setTimeout 的執行順序會在 setImmediate 的前面,有時候會在 setImmediate 的後面,這並不是 node.js 的 bug,這是因爲雖然 setTimeout 第二個參數設置爲0或者不設置,但是 setTimeout 源碼中,會指定一個具體的毫秒數(node爲1ms,瀏覽器爲4ms),而由於當前代碼執行時間受到執行環境的影響,執行時間有所起伏,如果當前執行的代碼小於這個指定的值時,setTimeout 還沒到推遲執行的時間,自然就先執行 setImmediate 了,如果當前執行的代碼超過這個指定的值時,setTimeout 就會先於 setImmediate 執行。
優先級
通過上面的介紹,我們就可以得出一個代碼執行的優先級:
同步代碼(宏任務) > process.nextTick > Promise(微任務)> setTimeout(fn)、setInterval(fn)(宏任務)> setImmediate(宏任務)> setTimeout(fn, time)、setInterval(fn, time),其中time>0
代碼解析
回到開頭給出的代碼,我們來一步一步解析:
運行”執行棧”中的代碼:
console.log(1); // setTimeout(function () { // 作爲宏任務,暫不執行,放到任務隊列中(1) // console.log(2); // // new Promise(function (resolve, reject) { // console.log(3); // resolve(); // console.log(4); // }).then(function () { // console.log(5); // }); // }); function fn() { console.log(6); //setTimeout(function () { // 作爲宏任務,暫不執行,放到任務隊列中(3) // console.log(7); //}, 50); } new Promise(function (resolve, reject) { console.log(8); resolve(); console.log(9); }) // .then(function () { // 作爲微任務,暫不執行 // console.log(10); // }); fn(); console.log(11); process.nextTick(function () { console.log(12); }); // setImmediate(function () { // 作爲宏任務,暫不執行,放到任務隊列中(2) // console.log(13); // });
此時輸出爲:1 8 9 6 11 12
運行微任務:
new Promise(function (resolve, reject) { // console.log(8); // 已執行 // resolve(); // 已執行 // console.log(9); // 已執行 }) .then(function () { console.log(10); });
此時輸出爲:10
讀取”任務隊列”的回調函數到”執行棧”:
setTimeout(function () { console.log(2); new Promise(function (resolve, reject) { console.log(3); resolve(); console.log(4); }) //.then(function () { // 作爲微任務,暫不執行 // console.log(5); //}); });
此時輸出爲:2 3 4
再運行微任務:
setTimeout(function () { // console.log(2); // 已執行 new Promise(function (resolve, reject) { // console.log(3); // 已執行 // resolve(); // 已執行 // console.log(4); // 已執行 }) .then(function () { console.log(5); }); });
此時輸出爲:5
再讀取”任務隊列”的回調函數到”執行棧”:
setImmediate(function () { console.log(13); });
此時輸出爲:13
運行微任務:
無
再讀取”任務隊列”的回調函數到”執行棧”:
// function fn() { // 已執行 // console.log(6); // 已執行 setTimeout(function () { console.log(7); }, 50); // }
此時輸出爲:7
運行微任務:
無
綜上,最終的輸出順序是:1 8 9 6 11 12 10 2 3 4 5 13 7
參考資料
- javascript中的Event Loop詳解 [鏈接地址(長按選擇即可複製): https://zhuanlan.zhihu.com/p/33136054 ]
- JavaScript 運行機制詳解:再談Event Loop [鏈接地址(長按選擇即可複製): http://www.ruanyifeng.com/blog/2014/10/event-loop.html ]
- 併發模型與事件循環 [鏈接地址(長按選擇即可複製): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop ]
- 這一次,徹底弄懂 JavaScript 執行機制 [鏈接地址(長按選擇即可複製): http://www.fly63.com/article/detial/171 ]
- Node探祕之事件循環(2)—setTimeout/setImmediate/process.nextTick的差別 [鏈接地址(長按選擇即可複製): https://www.jianshu.com/p/837b584e1bdd ]