688      阿裏雲  技術社區[雲棲]

JavaScript Event Loop機製詳解與Vue.js中nextTick的實踐應用

本文依次介紹了函數調用棧、MacroTask 與 MicroTask 執行順序、淺析 Vue.js 中 nextTick 實現等內容;本文中引用的參考資料統一聲明在 JavaScript 學習與實踐資料索引。

1. 事件循環機製詳解與實踐應用

JavaScript 是典型的單線程單並發語言，即表示在同一時間片內其隻能執行單個任務或者部分代碼片。換言之，我們可以認為某個同域瀏覽器上下中 JavaScript 主線程擁有一個函數調用棧以及一個任務隊列(參考 whatwg 規範);主線程會依次執行代碼，當遇到函數時，會先將函數入棧，函數運行完畢後再將該函數出棧，直到所有代碼執行完畢。當函數調用棧為空時，運行時即會根據事件循環(Event Loop)機製來從任務隊列中提取出待執行的回調並執行，執行的過程同樣會進行函數幀的入棧出棧操作。每個線程有自己的事件循環，所以每個 Web Worker有自己的，所以它才可以獨立執行。然而，所有同屬一個 origin 的窗體都共享一個事件循環，所以它們可以同步交流。

Event Loop(事件循環)並不是 JavaScript 中獨有的，其廣泛應用於各個領域的異步編程實現中;所謂的 Event Loop 即是一係列回調函數的集合，在執行某個異步函數時，會將其回調壓入隊列中，JavaScript 引擎會在異步代碼執行完畢後開始處理其關聯的回調。

在 Web 開發中，我們常常會需要處理網絡請求等相對較慢的操作，如果將這些操作全部以同步阻塞方式運行無疑會大大降低用戶界麵的體驗。另一方麵，我們點擊某些按鈕之後的響應事件可能會導致界麵重渲染，如果因為響應事件的執行而阻塞了界麵的渲染，同樣會影響整體性能。實際開發中我們會采用異步回調來處理這些操作，這種調用者與響應之間的解耦保證了 JavaScript 能夠在等待異步操作完成之前仍然能夠執行其他的代碼。Event Loop 正是負責執行隊列中的回調並且將其壓入到函數調用棧中，其基本的代碼邏輯如下所示：

1. while (queue.waitForMessage()) { 
2.  
3.   queue.processNextMessage(); 
4.  
5. }  

完整的瀏覽器中 JavaScript 事件循環機製圖解如下：

在 Web 瀏覽器中，任何時刻都有可能會有事件被觸發，而僅有那些設置了回調的事件會將其相關的任務壓入到任務隊列中。回調函數被調用時即會在函數調用棧中創建初始幀，而直到整個函數調用棧清空之前任何產生的任務都會被壓入到任務隊列中延後執行;順序的同步函數調用則會創建新的棧幀。總結而言，瀏覽器中的事件循環機製闡述如下：

• 瀏覽器內核會在其它線程中執行異步操作，當操作完成後，將操作結果以及事先定義的回調函數放入 JavaScript 主線程的任務隊列中。
• JavaScript 主線程會在執行棧清空後，讀取任務隊列，讀取到任務隊列中的函數後，將該函數入棧，一直運行直到執行棧清空，再次去讀取任務隊列，不斷循環。
• 當主線程阻塞時，任務隊列仍然是能夠被推入任務的。這也就是為什麼當頁麵的 JavaScript 進程阻塞時，我們觸發的點擊等事件，會在進程恢複後依次執行。

2. 函數調用棧與任務隊列

在變量作用域與提升一節中我們介紹過所謂執行上下文(Execution Context)的概念，在 JavaScript 代碼執行過程中，我們可能會擁有一個全局上下文，多個函數上下文或者塊上下文;每個函數調用都會創造新的上下文與局部作用域。而這些執行上下文堆疊就形成了所謂的執行上下文棧(Execution Context Stack)，便如上文介紹的 JavaScript 是單線程事件循環機製，同時刻僅會執行單個事件，而其他事件都在所謂的執行棧中排隊等待：

而從 JavaScript 內存模型的角度，我們可以將內存劃分為調用棧(Call Stack)、堆(Heap)以及隊列(Queue)等幾個部分：

其中的調用棧會記錄所有的函數調用信息，當我們調用某個函數時，會將其參數與局部變量等壓入棧中;在執行完畢後，會彈出棧首的元素。而堆則存放了大量的非結構化數據，譬如程序分配的變量與對象。隊列則包含了一係列待處理的信息與相關聯的回調函數，每個 JavaScript 運行時都必須包含一個任務隊列。當調用棧為空時，運行時會從隊列中取出某個消息並且執行其關聯的函數(也就是創建棧幀的過程);運行時會遞歸調用函數並創建調用棧，直到函數調用棧全部清空再從任務隊列中取出消息。換言之，譬如按鈕點擊或者 HTTP 請求響應都會作為消息存放在任務隊列中;需要注意的是，僅當這些事件的回調函數存在時才會被放入任務隊列，否則會被直接忽略。

譬如對於如下的代碼塊：

1. function fire() { 
2.  
3.     const result = sumSqrt(3, 4) 
4.  
5.     console.log(result); 
6.  
7. } 
8.  
9. function sumSqrt(x, y) { 
10.  
11.     const s1 = square(x) 
12.  
13.     const s2 = square(y) 
14.  
15.     const sum = s1 + s2; 
16.  
17.     return Math.sqrt(sum) 
18.  
19. } 
20.  
21. function square(x) { 
22.  
23.     return x * x; 
24.  
25. }   
26.  
27. fire()  

其對應的函數調用圖(整理自這裏)為：

這裏還值得一提的是，Promise.then 是異步執行的，而創建 Promise 實例 (executor) 是同步執行的，譬如下述代碼：

1. (function test() { 
2.  
3.     setTimeout(function() {console.log(4)}, 0); 
4.  
5.     new Promise(function executor(resolve) { 
6.  
7.         console.log(1); 
8.  
9.         for( var i=0 ; i<10000 ; i++ ) { 
10.  
11.             i == 9999 && resolve(); 
12.  
13.         } 
14.  
15.         console.log(2); 
16.  
17.     }).then(function() { 
18.  
19.         console.log(5); 
20.  
21.     }); 
22.  
23.     console.log(3); 
24.  
25. })() 
26.  
27. // 輸出結果為： 
28.  
29. // 1 
30.  
31. // 2 
32.  
33. // 3 
34.  
35. // 5 
36.  
37. // 4  

我們可以參考 Promise 規範中有關於 promise.then 的部分：

1. promise.then(onFulfilled, onRejected)      
2.  
3. 2.2.4 onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1].     
4.  
5. Here “platform code” means engine, environment, and promise implementation code. In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack. This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick. Since the promise implementation is considered platform code, it may itself contain a task-scheduling queue or “trampoline” in which the handlers are called. 

規範要求，onFulfilled 必須在執行上下文棧(Execution Context Stack) 隻包含 平台代碼(platform code) 後才能執行。平台代碼指引擎，環境，Promise 實現代碼等。實踐上來說，這個要求保證了 onFulfilled 的異步執行(以全新的棧)，在 then 被調用的這個事件循環之後。

3. MacroTask(Task) 與 MicroTask(Job)

在麵試中我們常常會碰到如下的代碼題，其主要就是考校 JavaScript 不同任務的執行先後順序：

1. // 測試代碼 
2.  
3. console.log('main1'); 
4.  
5.   
6.  
7. // 該函數僅在 Node.js 環境下可以使用 
8.  
9. process.nextTick(function() { 
10.  
11.     console.log('process.nextTick1'); 
12.  
13. }); 
14.  
15.   
16.  
17. setTimeout(function() { 
18.  
19.     console.log('setTimeout'); 
20.  
21.     process.nextTick(function() { 
22.  
23.         console.log('process.nextTick2'); 
24.  
25.     }); 
26.  
27. }, 0); 
28.  
29.   
30.  
31. new Promise(function(resolve, reject) { 
32.  
33.     console.log('promise'); 
34.  
35.     resolve(); 
36.  
37. }).then(function() { 
38.  
39.     console.log('promise then'); 
40.  
41. }); 
42.  
43.   
44.  
45. console.log('main2'); 
46.  
47.   
48.  
49. // 執行結果 
50.  
51. main1 
52.  
53. promise 
54.  
55. main2 
56.  
57. process.nextTick1 
58.  
59. promise then 
60.  
61. setTimeout 
62.  
63. process.nextTick2  

我們在前文中已經介紹過 JavaScript 的主線程在遇到異步調用時，這些異步調用會立刻返回某個值，從而讓主線程不會在此處阻塞。而真正的異步操作會由瀏覽器執行，主線程則會在清空當前調用棧後，按照先入先出的順序讀取任務隊列裏麵的任務。而 JavaScript 中的任務又分為 MacroTask 與 MicroTask 兩種，在 ES2015 中 MacroTask 即指 Task，而 MicroTask 則是指代 Job。典型的 MacroTask 包含了 setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering 等，MicroTask 包含了 process.nextTick, Promises, Object.observe, MutationObserver 等。 二者的關係可以圖示如下：

參考 whatwg 規範 中的描述：一個事件循環(Event Loop)會有一個或多個任務隊列(Task Queue，又稱 Task Source)，這裏的 Task Queue 就是 MacroTask Queue，而 Event Loop 僅有一個 MicroTask Queue。每個 Task Queue 都保證自己按照回調入隊的順序依次執行，所以瀏覽器可以從內部到JS/DOM，保證動作按序發生。而在 Task 的執行之間則會清空已有的 MicroTask 隊列，在 MacroTask 或者 MicroTask 中產生的 MicroTask 同樣會被壓入到 MicroTask 隊列中並執行。參考如下代碼：

1. function foo() { 
2.  
3.   console.log("Start of queue"); 
4.  
5.   bar(); 
6.  
7.   setTimeout(function() { 
8.  
9.     console.log("Middle of queue"); 
10.  
11.   }, 0); 
12.  
13.   Promise.resolve().then(function() { 
14.  
15.     console.log("Promise resolved"); 
16.  
17.     Promise.resolve().then(function() { 
18.  
19.       console.log("Promise resolved again"); 
20.  
21.     }); 
22.  
23.   }); 
24.  
25.   console.log("End of queue"); 
26.  
27. }  
28.   
29.  
30. function bar() { 
31.  
32.   setTimeout(function() { 
33.  
34.     console.log("Start of next queue"); 
35.  
36.   }, 0); 
37.  
38.   setTimeout(function() { 
39.  
40.     console.log("End of next queue"); 
41.  
42.   }, 0); 
43.  
44. }  
45.   
46.  
47. foo();  
48.   
49.  
50. // 輸出 
51.  
52. Start of queue 
53.  
54. End of queue 
55.  
56. Promise resolved 
57.  
58. Promise resolved again 
59.  
60. Start of next queue 
61.  
62. End of next queue 
63.  
64. Middle of queue  

上述代碼中首個 TaskQueue 即為 foo()，foo() 又調用了 bar() 構建了新的 TaskQueue，bar() 調用之後 foo() 又產生了 MicroTask 並被壓入了唯一的 MicroTask 隊列。我們最後再總計下 JavaScript MacroTask 與 MicroTask 的執行順序，當執行棧(call stack)為空的時候，開始依次執行：

《這一段在我筆記裏也放了好久，無法確定是否拷貝的。。。如果有哪位發現請及時告知。。。(*ฅ́˘ฅ̀*)》

1）把最早的任務(task A)放入任務隊列

2）如果 task A 為null (那任務隊列就是空)，直接跳到第6步

3）將 currently running task 設置為 task A

4）執行 task A (也就是執行回調函數)

5）將 currently running task 設置為 null 並移出 task A

6）執行 microtask 隊列a: 在 microtask 中選出最早的任務 task X

b: 如果 task X 為null (那 microtask 隊列就是空)，直接跳到 g

c: 將 currently running task 設置為 task X

d: 執行 task X

e: 將 currently running task 設置為 null 並移出 task X

f: 在 microtask 中選出最早的任務 , 跳到 b

g: 結束 microtask 隊列

1）跳到第一步

4. 淺析 Vue.js 中 nextTick 的實現

在 Vue.js 中，其會異步執行 DOM 更新;當觀察到數據變化時，Vue 將開啟一個隊列，並緩衝在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，隻會一次推入到隊列中。這種在緩衝時去除重複數據對於避免不必要的計算和 DOM 操作上非常重要。然後，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際(已去重的)工作。Vue 在內部嚐試對異步隊列使用原生的 Promise.then 和 MutationObserver，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。

《因為本人失誤，原來此處內容拷貝了 https://www.zhihu.com/question/55364497 這個回答，造成了侵權，深表歉意，已經刪除，後續我會在 github 鏈接上重寫本段》

而當我們希望在數據更新之後執行某些 DOM 操作，就需要使用 nextTick 函數來添加回調：

1. // HTML 
2.  
3. <div id="example">{{message}}</div> 
4.  
5.   
6.  
7. // JS 
8.  
9. var vm = new Vue({ 
10.  
11.   el: '#example', 
12.  
13.   data: { 
14.  
15.     message: '123' 
16.  
17.   } 
18.  
19. }) 
20.  
21. vm.message = 'new message' // 更改數據 
22.  
23. vm.$el.textContent === 'new message' // false 
24.  
25. Vue.nextTick(function () { 
26.  
27.   vm.$el.textContent === 'new message' // true 
28.  
29. })  

在組件內使用 vm.$nextTick() 實例方法特別方便，因為它不需要全局 Vue ，並且回調函數中的 this 將自動綁定到當前的 Vue 實例上：

1. Vue.component('example', { 
2.  
3.   template: '<span>{{ message }}</span>', 
4.  
5.   data: function () { 
6.  
7.     return { 
8.  
9.       message: '沒有更新' 
10.  
11.     } 
12.  
13.   }, 
14.  
15.   methods: { 
16.  
17.     updateMessage: function () { 
18.  
19.       this.message = '更新完成' 
20.  
21.       console.log(this.$el.textContent) // => '沒有更新' 
22.  
23.       this.$nextTick(function () { 
24.  
25.         console.log(this.$el.textContent) // => '更新完成' 
26.  
27.       }) 
28.  
29.     } 
30.  
31.   } 
32.  
33. })  

src/core/util/env

1. /** 
2.  
3. * 使用 MicroTask 來異步執行批次任務 
4.  
5. */ 
6.  
7. export const nextTick = (function() { 
8.  
9.   // 需要執行的回調列表 
10.  
11.   const callbacks = []; 
12.  
13.   
14.  
15.   // 是否處於掛起狀態 
16.  
17.   let pending = false; 
18.  
19.   
20.  
21.   // 時間函數句柄 
22.  
23.   let timerFunc; 
24.  
25.   
26.  
27.   // 執行並且清空所有的回調列表 
28.  
29.   function nextTickHandler() { 
30.  
31.     pending = false; 
32.  
33.     const copies = callbacks.slice(0); 
34.  
35.     callbacks.length = 0; 
36.  
37.     for (let i = 0; i < copies.length; i++) { 
38.  
39.       copies[i](); 
40.  
41.     } 
42.  
43.   } 
44.  
45.   
46.  
47.   // nextTick 的回調會被加入到 MicroTask 隊列中，這裏我們主要通過原生的 Promise 與 MutationObserver 實現 
48.  
49.   /* istanbul ignore if */ 
50.  
51.   if (typeof Promise !== 'undefined' && isNative(Promise)) { 
52.  
53.     let p = Promise.resolve(); 
54.  
55.     let logError = err => { 
56.  
57.       console.error(err); 
58.  
59.     }; 
60.  
61.     timerFunc = () => { 
62.  
63.       p.then(nextTickHandler).catch(logError); 
64.  
65.   
66.  
67.       // 在部分 iOS 係統下的 UIWebViews 中，Promise.then 可能並不會被清空，因此我們需要添加額外操作以觸發 
68.  
69.       if (isIOS) setTimeout(noop); 
70.  
71.     }; 
72.  
73.   } else if ( 
74.  
75.     typeof MutationObserver !== 'undefined' && 
76.  
77.     (isNative(MutationObserver) || 
78.  
79.       // PhantomJS and iOS 7.x 
80.  
81.       MutationObserver.toString() === '[object MutationObserverConstructor]') 
82.  
83.   ) { 
84.  
85.     // 當 Promise 不可用時候使用 MutationObserver 
86.  
87.     // e.g. PhantomJS IE11, iOS7, Android 4.4 
88.  
89.     let counter = 1; 
90.  
91.     let observer = new MutationObserver(nextTickHandler); 
92.  
93.     let textNode = document.createTextNode(String(counter)); 
94.  
95.     observer.observe(textNode, { 
96.  
97.       characterData: true 
98.  
99.     }); 
100.  
101.     timerFunc = () => { 
102.  
103.       counter = (counter + 1) % 2; 
104.  
105.       textNode.data = String(counter); 
106.  
107.     }; 
108.  
109.   } else { 
110.  
111.     // 如果都不存在，則回退使用 setTimeout 
112.  
113.     /* istanbul ignore next */ 
114.  
115.     timerFunc = () => { 
116.  
117.       setTimeout(nextTickHandler, 0); 
118.  
119.     }; 
120.  
121.   } 
122.  
123.   
124.  
125.   return function queueNextTick(cb?: Function, ctx?: Object) { 
126.  
127.     let _resolve; 
128.  
129.     callbacks.push(() => { 
130.  
131.       if (cb) { 
132.  
133.         try { 
134.  
135.           cb.call(ctx); 
136.  
137.         } catch (e) { 
138.  
139.           handleError(e, ctx, 'nextTick'); 
140.  
141.         } 
142.  
143.       } else if (_resolve) { 
144.  
145.         _resolve(ctx); 
146.  
147.       } 
148.  
149.     }); 
150.  
151.     if (!pending) { 
152.  
153.       pending = true; 
154.  
155.       timerFunc(); 
156.  
157.     } 
158.  
159.   
160.  
161.     // 如果沒有傳入回調，則表示以異步方式調用 
162.  
163.     if (!cb && typeof Promise !== 'undefined') { 
164.  
165.       return new Promise((resolve, reject) => { 
166.  
167.         _resolve = resolve; 
168.  
169.       }); 
170.  
171.     } 
172.  
173.   }; 
174.  
175. })();  

5. 延伸閱讀

• 深入淺出 Node.js 全棧架構 – Node.js 事件循環機製詳解與實踐 

最後更新：2017-09-12 15:02:50

  上一篇：  React Native開發環境搭建

  下一篇：  以太坊是什麼鬼？！媲美比特幣的加密幣大揭秘