自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用

作者：張梓雄
開發(fā) 開發(fā)工具
JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語法基礎與實踐技巧系列文章。本文依次介紹了函數(shù)調(diào)用棧、MacroTask 與 MicroTask 執(zhí)行順序、淺析 Vue.js 中 nextTick 實現(xiàn)等內(nèi)容;本文中引用的參考資料統(tǒng)一聲明在 JavaScript 學習與實踐資料索引。

[[203581]]

JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語法基礎與實踐技巧系列文章。本文依次介紹了函數(shù)調(diào)用棧、MacroTask 與 MicroTask 執(zhí)行順序、淺析 Vue.js 中 nextTick 實現(xiàn)等內(nèi)容;本文中引用的參考資料統(tǒng)一聲明在 JavaScript 學習與實踐資料索引。

1. 事件循環(huán)機制詳解與實踐應用

JavaScript 是典型的單線程單并發(fā)語言，即表示在同一時間片內(nèi)其只能執(zhí)行單個任務或者部分代碼片。換言之，我們可以認為某個同域瀏覽器上下中 JavaScript 主線程擁有一個函數(shù)調(diào)用棧以及一個任務隊列(參考 whatwg 規(guī)范);主線程會依次執(zhí)行代碼，當遇到函數(shù)時，會先將函數(shù)入棧，函數(shù)運行完畢后再將該函數(shù)出棧，直到所有代碼執(zhí)行完畢。

當函數(shù)調(diào)用棧為空時，運行時即會根據(jù)事件循環(huán)(Event Loop)機制來從任務隊列中提取出待執(zhí)行的回調(diào)并執(zhí)行，執(zhí)行的過程同樣會進行函數(shù)幀的入棧出棧操作。每個線程有自己的事件循環(huán)，所以每個 Web Worker有自己的，所以它才可以獨立執(zhí)行。然而，所有同屬一個 origin 的窗體都共享一個事件循環(huán)，所以它們可以同步交流。

Event Loop(事件循環(huán))并不是 JavaScript 中獨有的，其廣泛應用于各個領域的異步編程實現(xiàn)中;所謂的 Event Loop 即是一系列回調(diào)函數(shù)的集合，在執(zhí)行某個異步函數(shù)時，會將其回調(diào)壓入隊列中，JavaScript 引擎會在異步代碼執(zhí)行完畢后開始處理其關聯(lián)的回調(diào)。

在 Web 開發(fā)中，我們常常會需要處理網(wǎng)絡請求等相對較慢的操作，如果將這些操作全部以同步阻塞方式運行無疑會大大降低用戶界面的體驗。

另一方面，我們點擊某些按鈕之后的響應事件可能會導致界面重渲染，如果因為響應事件的執(zhí)行而阻塞了界面的渲染，同樣會影響整體性能。實際開發(fā)中我們會采用異步回調(diào)來處理這些操作，這種調(diào)用者與響應之間的解耦保證了 JavaScript 能夠在等待異步操作完成之前仍然能夠執(zhí)行其他的代碼。Event Loop 正是負責執(zhí)行隊列中的回調(diào)并且將其壓入到函數(shù)調(diào)用棧中，其基本的代碼邏輯如下所示：

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

完整的瀏覽器中 JavaScript 事件循環(huán)機制圖解如下：

在 Web 瀏覽器中，任何時刻都有可能會有事件被觸發(fā)，而僅有那些設置了回調(diào)的事件會將其相關的任務壓入到任務隊列中?；卣{(diào)函數(shù)被調(diào)用時即會在函數(shù)調(diào)用棧中創(chuàng)建初始幀，而直到整個函數(shù)調(diào)用棧清空之前任何產(chǎn)生的任務都會被壓入到任務隊列中延后執(zhí)行;順序的同步函數(shù)調(diào)用則會創(chuàng)建新的棧幀?？偨Y而言，瀏覽器中的事件循環(huán)機制闡述如下：

  • 瀏覽器內(nèi)核會在其它線程中執(zhí)行異步操作，當操作完成后，將操作結果以及事先定義的回調(diào)函數(shù)放入 JavaScript 主線程的任務隊列中。
  • JavaScript 主線程會在執(zhí)行棧清空后，讀取任務隊列，讀取到任務隊列中的函數(shù)后，將該函數(shù)入棧，一直運行直到執(zhí)行棧清空，再次去讀取任務隊列，不斷循環(huán)。
  • 當主線程阻塞時，任務隊列仍然是能夠被推入任務的。這也就是為什么當頁面的 JavaScript 進程阻塞時，我們觸發(fā)的點擊等事件，會在進程恢復后依次執(zhí)行。

2. 函數(shù)調(diào)用棧與任務隊列

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

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

其中的調(diào)用棧會記錄所有的函數(shù)調(diào)用信息，當我們調(diào)用某個函數(shù)時，會將其參數(shù)與局部變量等壓入棧中;在執(zhí)行完畢后，會彈出棧首的元素。而堆則存放了大量的非結構化數(shù)據(jù)，譬如程序分配的變量與對象。隊列則包含了一系列待處理的信息與相關聯(lián)的回調(diào)函數(shù)，每個 JavaScript 運行時都必須包含一個任務隊列。

當調(diào)用棧為空時，運行時會從隊列中取出某個消息并且執(zhí)行其關聯(lián)的函數(shù)(也就是創(chuàng)建棧幀的過程);運行時會遞歸調(diào)用函數(shù)并創(chuàng)建調(diào)用棧，直到函數(shù)調(diào)用棧全部清空再從任務隊列中取出消息。換言之，譬如按鈕點擊或者 HTTP 請求響應都會作為消息存放在任務隊列中;需要注意的是，僅當這些事件的回調(diào)函數(shù)存在時才會被放入任務隊列，否則會被直接忽略。

譬如對于如下的代碼塊：

  1. function fire() { 
  2.     const result = sumSqrt(3, 4) 
  3.     console.log(result); 
  4. } 
  5. function sumSqrt(x, y) { 
  6.     const s1 = square(x) 
  7.     const s2 = square(y) 
  8.     const sum = s1 + s2; 
  9.     return Math.sqrt(sum) 
  10. } 
  11. function square(x) { 
  12.     return x * x; 
  13. } 
  14.  
  15. fire() 

其對應的函數(shù)調(diào)用圖(整理自這里)為：

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

  1. (function test() { 
  2.     setTimeout(function() {console.log(4)}, 0); 
  3.     new Promise(function executor(resolve) { 
  4.         console.log(1); 
  5.         for( var i=0 ; i<10000 ; i++ ) { 
  6.             i == 9999 && resolve(); 
  7.         } 
  8.         console.log(2); 
  9.     }).then(function() { 
  10.         console.log(5); 
  11.     }); 
  12.     console.log(3); 
  13. })() 
  14.  
  15. // 輸出結果為： 
  16. // 1 
  17. // 2 
  18. // 3 
  19. // 5 
  20. // 4 

我們可以參考 Promise 規(guī)范中有關于 promise.then 的部分：

promise.then(onFulfilled, onRejected)

2.2.4 onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1].

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.

規(guī)范要求，onFulfilled 必須在執(zhí)行上下文棧(Execution Context Stack) 只包含 平臺代碼(platform code) 后才能執(zhí)行。平臺代碼指引擎，環(huán)境，Promise 實現(xiàn)代碼等。實踐上來說，這個要求保證了 onFulfilled 的異步執(zhí)行(以全新的棧)，在 then 被調(diào)用的這個事件循環(huán)之后。

3. MacroTask(Task) 與 MicroTask(Job)

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

  1. // 測試代碼 
  2. console.log('main1'); 
  3.  
  4. // 該函數(shù)僅在 Node.js 環(huán)境下可以使用 
  5. process.nextTick(function() { 
  6.     console.log('process.nextTick1'); 
  7. }); 
  8.  
  9. setTimeout(function() { 
  10.     console.log('setTimeout'); 
  11.     process.nextTick(function() { 
  12.         console.log('process.nextTick2'); 
  13.     }); 
  14. }, 0); 
  15.  
  16. new Promise(function(resolve, reject) { 
  17.     console.log('promise'); 
  18.     resolve(); 
  19. }).then(function() { 
  20.     console.log('promise then'); 
  21. }); 
  22.  
  23. console.log('main2'); 
  24.  
  25. // 執(zhí)行結果 
  26. main1 
  27. promise 
  28. main2 
  29. process.nextTick1 
  30. promise then 
  31. setTimeout 
  32. process.nextTick2 

我們在前文中已經(jīng)介紹過 JavaScript 的主線程在遇到異步調(diào)用時，這些異步調(diào)用會立刻返回某個值，從而讓主線程不會在此處阻塞。而真正的異步操作會由瀏覽器執(zhí)行，主線程則會在清空當前調(diào)用棧后，按照先入先出的順序讀取任務隊列里面的任務。

而 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 規(guī)范 中的描述：一個事件循環(huán)(Event Loop)會有一個或多個任務隊列(Task Queue，又稱 Task Source)，這里的 Task Queue 就是 MacroTask Queue，而 Event Loop 僅有一個 MicroTask Queue。

每個 Task Queue 都保證自己按照回調(diào)入隊的順序依次執(zhí)行，所以瀏覽器可以從內(nèi)部到JS/DOM，保證動作按序發(fā)生。而在 Task 的執(zhí)行之間則會清空已有的 MicroTask 隊列，在 MacroTask 或者 MicroTask 中產(chǎn)生的 MicroTask 同樣會被壓入到 MicroTask 隊列中并執(zhí)行。參考如下代碼：

  1. function foo() { 
  2.   console.log("Start of queue"); 
  3.   bar(); 
  4.   setTimeout(function() { 
  5.     console.log("Middle of queue"); 
  6.   }, 0); 
  7.   Promise.resolve().then(function() { 
  8.     console.log("Promise resolved"); 
  9.     Promise.resolve().then(function() { 
  10.       console.log("Promise resolved again"); 
  11.     }); 
  12.   }); 
  13.   console.log("End of queue"); 
  14. } 
  15.  
  16. function bar() { 
  17.   setTimeout(function() { 
  18.     console.log("Start of next queue"); 
  19.   }, 0); 
  20.   setTimeout(function() { 
  21.     console.log("End of next queue"); 
  22.   }, 0); 
  23. } 
  24.  
  25. foo(); 
  26.  
  27. // 輸出 
  28. Start of queue 
  29. End of queue 
  30. Promise resolved 
  31. Promise resolved again 
  32. Start of next queue 
  33. End of next queue 
  34. Middle of queue 

上述代碼中*** TaskQueue 即為 foo()，foo() 又調(diào)用了 bar() 構建了新的 TaskQueue，bar() 調(diào)用之后 foo() 又產(chǎn)生了 MicroTask 并被壓入了唯一的 MicroTask 隊列。我們***再總計下 JavaScript MacroTask 與 MicroTask 的執(zhí)行順序，當執(zhí)行棧(call stack)為空的時候，開始依次執(zhí)行：

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

  1. 把最早的任務(task A)放入任務隊列
  2. 如果 task A 為null (那任務隊列就是空)，直接跳到第6步
  3. 將 currently running task 設置為 task A
  4. 執(zhí)行 task A (也就是執(zhí)行回調(diào)函數(shù))
  5. 將 currently running task 設置為 null 并移出 task A
  6. 執(zhí)行 microtask 隊列
  • a: 在 microtask 中選出最早的任務 task X
  • b: 如果 task X 為null (那 microtask 隊列就是空)，直接跳到 g
  • c: 將 currently running task 設置為 task X
  • d: 執(zhí)行 task X
  • e: 將 currently running task 設置為 null 并移出 task X
  • f: 在 microtask 中選出最早的任務 , 跳到 b
  • g: 結束 microtask 隊列

1.跳到***步

4. 淺析 Vue.js 中 nextTick 的實現(xiàn)

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

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

而當我們希望在數(shù)據(jù)更新之后執(zhí)行某些 DOM 操作，就需要使用 nextTick 函數(shù)來添加回調(diào)：

  1. // HTML 
  2. <div id="example">{{message}}</div> 
  3.  
  4. // JS 
  5. var vm = new Vue({ 
  6.   el: '#example', 
  7.   data: { 
  8.     message: '123' 
  9.   } 
  10. }) 
  11. vm.message = 'new message' // 更改數(shù)據(jù) 
  12. vm.$el.textContent === 'new message' // false 
  13. Vue.nextTick(function () { 
  14.   vm.$el.textContent === 'new message' // true 
  15. }) 

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

  1. Vue.component('example', { 
  2.   template: '<span>{{ message }}</span>', 
  3.   data: function () { 
  4.     return { 
  5.       message: '沒有更新' 
  6.     } 
  7.   }, 
  8.   methods: { 
  9.     updateMessage: function () { 
  10.       this.message = '更新完成' 
  11.       console.log(this.$el.textContent) // => '沒有更新' 
  12.       this.$nextTick(function () { 
  13.         console.log(this.$el.textContent) // => '更新完成' 
  14.       }) 
  15.     } 
  16.   } 
  17. }) 

src/core/util/env

  1. /** 
  2.  * 使用 MicroTask 來異步執(zhí)行批次任務 
  3.  */ 
  4. export const nextTick = (function() { 
  5.   // 需要執(zhí)行的回調(diào)列表 
  6.   const callbacks = []; 
  7.  
  8.   // 是否處于掛起狀態(tài) 
  9.   let pending = false; 
  10.  
  11.   // 時間函數(shù)句柄 
  12.   let timerFunc; 
  13.  
  14.   // 執(zhí)行并且清空所有的回調(diào)列表 
  15.   function nextTickHandler() { 
  16.     pending = false; 
  17.     const copies = callbacks.slice(0); 
  18.     callbacks.length = 0; 
  19.     for (let i = 0; i < copies.length; i++) { 
  20.       copies[i](); 
  21.     } 
  22.   } 
  23.  
  24.   // nextTick 的回調(diào)會被加入到 MicroTask 隊列中，這里我們主要通過原生的 Promise 與 MutationObserver 實現(xiàn) 
  25.   /* istanbul ignore if */ 
  26.   if (typeof Promise !== 'undefined' && isNative(Promise)) { 
  27.     let p = Promise.resolve(); 
  28.     let logError = err => { 
  29.       console.error(err); 
  30.     }; 
  31.     timerFunc = () => { 
  32.       p.then(nextTickHandler).catch(logError); 
  33.  
  34.       // 在部分 iOS 系統(tǒng)下的 UIWebViews 中，Promise.then 可能并不會被清空，因此我們需要添加額外操作以觸發(fā) 
  35.       if (isIOS) setTimeout(noop); 
  36.     }; 
  37.   } else if ( 
  38.     typeof MutationObserver !== 'undefined' && 
  39.     (isNative(MutationObserver) || 
  40.       // PhantomJS and iOS 7.x 
  41.       MutationObserver.toString() === '[object MutationObserverConstructor]') 
  42.   ) { 
  43.     // 當 Promise 不可用時候使用 MutationObserver 
  44.     // e.g. PhantomJS IE11, iOS7, Android 4.4 
  45.     let counter = 1; 
  46.     let observer = new MutationObserver(nextTickHandler); 
  47.     let textNode = document.createTextNode(String(counter)); 
  48.     observer.observe(textNode, { 
  49.       characterData: true 
  50.     }); 
  51.     timerFunc = () => { 
  52.       counter = (counter + 1) % 2; 
  53.       textNode.data = String(counter); 
  54.     }; 
  55.   } else { 
  56.     // 如果都不存在，則回退使用 setTimeout 
  57.     /* istanbul ignore next */ 
  58.     timerFunc = () => { 
  59.       setTimeout(nextTickHandler, 0); 
  60.     }; 
  61.   } 
  62.  
  63.   return function queueNextTick(cb?: Function, ctx?: Object) { 
  64.     let _resolve; 
  65.     callbacks.push(() => { 
  66.       if (cb) { 
  67.         try { 
  68.           cb.call(ctx); 
  69.         } catch (e) { 
  70.           handleError(e, ctx, 'nextTick'); 
  71.         } 
  72.       } else if (_resolve) { 
  73.         _resolve(ctx); 
  74.       } 
  75.     }); 
  76.     if (!pending) { 
  77.       pending = true; 
  78.       timerFunc(); 
  79.     } 
  80.  
  81.     // 如果沒有傳入回調(diào)，則表示以異步方式調(diào)用 
  82.     if (!cb && typeof Promise !== 'undefined') { 
  83.       return new Promise((resolve, reject) => { 
  84.         _resolve = resolve; 
  85.       }); 
  86.     } 
  87.   }; 
  88. })(); 

 【本文是51CTO專欄作者“張梓雄 ”的原創(chuàng)文章，如需轉載請通過51CTO與作者聯(lián)系】

戳這里，看該作者更多好文

責任編輯：武曉燕 來源： 51CTO專欄
Vue.js機制應用
相關推薦

2017-09-12 09:50:08

JavaScriptEvent LoopVue.js

2019-10-11 09:00:00

JavaScriptEvent Loop前端

2022-06-29 08:37:03

事件循環(huán)JS 語言

2017-07-04 17:55:37

Vue.js插件開發(fā)

2018-04-04 10:32:13

前端JavascriptVue.js

2024-05-13 08:04:26

Vue.jsWeb應用程序

2023-03-29 14:25:08

Vue.js前端框架

2024-04-08 07:28:27

PiniaVue3狀態(tài)管理庫

2023-04-27 08:23:38

JavaScriptVue.jsMVVC

2010-10-09 10:30:03

JS event

2024-04-16 07:46:15

Vue3STOMP協(xié)議WebSocket

2013-10-24 15:23:40

Event Loop

2023-04-28 15:20:37

JavaScript事件循環(huán)

2022-08-29 18:15:25

Node.js多線程模型

2022-04-14 09:35:03

Vue.js設計Reflect

2019-04-01 19:38:28

Vue.jsJavascript前端

2024-05-17 09:51:11

2022-04-04 16:53:56

Vue.js設計框架

2024-04-07 07:53:12

SpringWeb技術WebSocket

2022-12-01 17:13:44

點贊
收藏

51CTO技術棧公眾號