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

xxzwdm 7年前發布 | 24K 次閱讀 Vue.js JavaScript開發

JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用歸納于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文依次介紹了函數調用棧、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 正是負責執行隊列中的回調并且將其壓入到函數調用棧中，其基本的代碼邏輯如下所示：

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

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

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

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

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

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

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

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

譬如對于如下的代碼塊：

function fire() {
    const result = sumSqrt(3, 4)
    console.log(result);
}
function sumSqrt(x, y) {
    const s1 = square(x)
    const s2 = square(y)
    const sum = s1 + s2;
    return Math.sqrt(sum)
}
function square(x) {
    return x * x;
}
 
fire()

其對應的函數調用圖（整理自這里）為：

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

(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);
})()
// 輸出結果為：
// 1
// 2
// 3
// 5
// 4

我們可以參考 Promise 規范中有關于 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.

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

3. MacroTask（Task）與 MicroTask（Job）

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

// 測試代碼
console.log('main1');
 
// 該函數僅在 Node.js 環境下可以使用
process.nextTick(function() {
    console.log('process.nextTick1');
});
 
setTimeout(function() {
    console.log('setTimeout');
    process.nextTick(function() {
        console.log('process.nextTick2');
    });
}, 0);
 
new Promise(function(resolve, reject) {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('promise then');
});
 
console.log('main2');
 
// 執行結果
main1
promise
main2
process.nextTick1
promise then
setTimeout
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 隊列中并執行。參考如下代碼：

function foo() {
  console.log("Start of queue");
  bar();
  setTimeout(function() {
    console.log("Middle of queue");
  }, 0);
  Promise.resolve().then(function() {
    console.log("Promise resolved");
    Promise.resolve().then(function() {
      console.log("Promise resolved again");
    });
  });
  console.log("End of queue");
}
 
function bar() {
  setTimeout(function() {
    console.log("Start of next queue");
  }, 0);
  setTimeout(function() {
    console.log("End of next queue");
  }, 0);
}
 
foo();
 
// 輸出
Start of queue
End of queue
Promise resolved
Promise resolved again
Start of next queue
End of next queue
Middle of queue

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

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

把最早的任務(task A)放入任務隊列
如果 task A 為null (那任務隊列就是空)，直接跳到第6步
將 currently running task 設置為 task A
執行 task A (也就是執行回調函數)
將 currently running task 設置為 null 并移出 task A
執行 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 隊列

跳到第一步

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

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

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

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

// HTML
<div id="example">{{message}}</div>
 
// JS
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改數據
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

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

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '沒有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '沒有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

src/core/util/env

/**
 * 使用 MicroTask 來異步執行批次任務
 */
export const nextTick = (function() {
  // 需要執行的回調列表
  const callbacks = [];
 
  // 是否處于掛起狀態
  let pending = false;
 
  // 時間函數句柄
  let timerFunc;
 
  // 執行并且清空所有的回調列表
  function nextTickHandler() {
    pending = false;
    const copies = callbacks.slice(0);
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }
 
  // nextTick 的回調會被加入到 MicroTask 隊列中，這里我們主要通過原生的 Promise 與 MutationObserver 實現
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    let p = Promise.resolve();
    let logError = err => {
      console.error(err);
    };
    timerFunc = () => {
      p.then(nextTickHandler).catch(logError);
 
      // 在部分 iOS 系統下的 UIWebViews 中，Promise.then 可能并不會被清空，因此我們需要添加額外操作以觸發
      if (isIOS) setTimeout(noop);
    };
  } else if (
    typeof MutationObserver !== 'undefined' &&
    (isNative(MutationObserver) ||
      // PhantomJS and iOS 7.x
      MutationObserver.toString() === '[object MutationObserverConstructor]')
  ) {
    // 當 Promise 不可用時候使用 MutationObserver
    // e.g. PhantomJS IE11, iOS7, Android 4.4
    let counter = 1;
    let observer = new MutationObserver(nextTickHandler);
    let textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = () => {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
  } else {
    // 如果都不存在，則回退使用 setTimeout
    /* istanbul ignore next */
    timerFunc = () => {
      setTimeout(nextTickHandler, 0);
    };
  }
 
  return function queueNextTick(cb?: Function, ctx?: Object) {
    let _resolve;
    callbacks.push(() => {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    if (!pending) {
      pending = true;
      timerFunc();
    }
 
    // 如果沒有傳入回調，則表示以異步方式調用
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise((resolve, reject) => {
        _resolve = resolve;
      });
    }
  };
})();

5. 延伸閱讀

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

來自：http://web.jobbole.com/92366/

本文由用戶 xxzwdm 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1505115554371.html

Vue.js JavaScript開發

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

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

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

3. MacroTask（Task）與 MicroTask（Job）

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

5. 延伸閱讀

相關經驗

相關資訊

相關文檔

目錄

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

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

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

3. MacroTask（Task） 與 MicroTask（Job）

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

5. 延伸閱讀

相關經驗

相關資訊

相關文檔

目錄

3. MacroTask（Task）與 MicroTask（Job）