nextTick的原理及執行機制

木子星兮發表於2020-04-03

文章首次發表在個人部落格

JS執行機制

JS執行是單執行緒的，它是基於事件迴圈的。事件迴圈大致分為以下幾個部分：

  1. 所有同步任務在主執行緒上執行，形成一個執行棧。
  2. 主執行緒之外，還存在一個“任務佇列”。只要非同步有了執行結果。就在"任務佇列"中放置一個事件。
  3. 一旦"執行棧"中所有的同步任務執行完畢，系統就會讀取“任務佇列”，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。
  4. 主執行緒不斷重複上面的第三步。

主執行緒的執行過程就是一個tick，而所有的非同步結果都是通過 "任務佇列" 來排程。訊息佇列中存放的是一個個 macro task 結束後，都要清空 所有的 micro task。

for (macroTask of macroTaskQueue) {
    // 1. Handle current MACRO-TASK
    handleMacroTask();
      
    // 2. Handle all MICRO-TASK
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}
複製程式碼

在瀏覽器環境中，常見的 macro task 有setTimeout、postMessage、setImmediate； 常見的 micro task有 Promise.then和MutationObserver（html5新特性，會在指定的DOM發生變化時被呼叫）

Vue是非同步更新DOM的

vue 是非同步驅動檢視更新的，即當我們在事件中修改資料時，檢視並不會即時的更新， 而是在等同一事件迴圈的所有資料變化完成後，再進行事件更新;

vue文件中的介紹:

Vue 在更新 DOM 時是非同步執行的，只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次，這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常重要。然後，在下一個的事件迴圈tick中， Vue 重新整理佇列並執行實際(已去重)的工作。Vue 在內部嘗試對非同步佇列使用原生Promise.then和 MutationObserver以及setImmediate, 如果執行環境不支援，會採用setTimeout(fn, 0)代替；

<div id="app">
    <p ref="message">{{ message }}</p>
    <button @click="handleClick">updateMessage</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '未更新'
        },
        methods: {
            handleClick () {
                vm.message = '已更新';
                console.log(111, vm.$refs.message.innerText); // => 111 "未更新"
                vm.$nextTick(() => {
                    console.log(222, vm.$refs.message.innerText); // => 222 "已更新"
                })
            }
        }
    })
</script>
複製程式碼

上面這個例子中，我們可以看到，更新message後，立刻列印DOM的內容，它並沒有更新，在 $nextTick中執行，我們可以得到更新後的值。 這也驗證了上面提到的 Vue在更新DOM時是非同步更新的。

為什麼需要非同步更新呢，我們可以想一下，如果只要每次資料改變，檢視就進行更新，會有很多不必要的渲染，比如一段時間內，你無意中修改了 message修改了很多次，其實只要最後一次修改後的值更新到DOM就可以了，假如是同步更新的，每次 message 值發生變化，那麼都要觸發 setter->Dep->Watcher->update->patch ，這個過程非常消耗效能。

nextTick的原理及執行機制

我們可以從原始碼入手進行分析，基於vue 2.6.11 版本, 原始碼位置src/core/util/next-tick.js

/* @flow */
/* globals MutationObserver */

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

export let isUsingMicroTask = false

const callbacks = []
let pending = false

/**
 * 對所有callback進行遍歷，然後指向響應的回撥函式
 * 使用 callbacks 保證了可以在同一個tick內執行多次 nextTick，不會開啟多個非同步任務，而把這些非同步任務都壓成一個同步任務，在下一個 tick 執行完畢。
*/

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// Here we have async deferring wrappers using microtasks.
// In 2.5 we used (macro) tasks (in combination with microtasks).
// However, it has subtle problems when state is changed right before repaint
// (e.g. #6813, out-in transitions).
// Also, using (macro) tasks in event handler would cause some weird behaviors
// that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
// So we now use microtasks everywhere, again.
// A major drawback of this tradeoff is that there are some scenarios
// where microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690, which have workarounds)
// or even between bubbling of the same event (#6566).

let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
/**
* timerFunc 實現的就是根據當前環境判斷使用哪種方式實現
* 就是按照 Promise.then和 MutationObserver以及setImmediate的優先順序來判斷，支援哪個就用哪個，如果執行環境不支援，會採用setTimeout(fn, 0)代替；
*/

// 判斷是否支援原生 Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
  // 不支援 Promise的話，再判斷是否原生支援 MutationObserver
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  // 新建一個 textNode的DOM物件，使用 MutationObserver 繫結該DOM並傳入回撥函式，在DOM發生變化的時候會觸發回撥，該回撥會進入主執行緒（比任務佇列優先執行）
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    // 此時便會觸發回撥
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
  // 不支援的 MutationObserver 的話，再去判斷是否原生支援 setImmediate
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Promise，MutationObserver, setImmediate 都不支援的話，最後使用 setTimeout(fun, 0)
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// 還函式的作用就是延遲 cb 到當前呼叫棧執行完成之後執行
export function nextTick (cb?: Function, ctx?: Object) {
  // 傳入的回撥函式會在callbacks中存起來
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // pending是一個狀態標記，保證timerFunc在下一個tick之前只執行一次
  if (!pending) {
    pending = true
    /**
    * timerFunc 實現的就是根據當前環境判斷使用哪種方式實現
    * 就是按照 Promise.then和 MutationObserver以及setImmediate的優先順序來判斷，支援哪個就用哪個，如果執行環境不支援，會採用setTimeout(fn, 0)代替；
    */
    timerFunc()
  }
  // 當nextTick不傳引數的時候，提供一個Promise化的呼叫
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
複製程式碼

大致說一下整個過程

  1. nextTick接受一個回撥函式時（當不傳引數的時候，提供一個Promise化的呼叫），傳入的回撥函式會在callbacks中存起來，根據一個狀態標記 pending 來判斷當前是否要執行 timerFunc()

  2. timerFunc() 是根據當前環境判斷使用哪種方式實現，按照 Promise.then和 MutationObserver以及setImmediate的優先順序來判斷，支援哪個就用哪個，如果執行環境不支援，會採用setTimeout(fn, 0)代替

  3. timerFunc() 函式中會執行 flushCallbacks函式，flushCallbacks函式的作用就是對所有callback進行遍歷，然後指向響應的回撥函式

總結

Vue是非同步更新DOM的，在平常的開發過程中，我們可能會需要基於更新後的 DOM 狀態來做點什麼，比如後端介面資料發生了變化，某些方法是依賴於更新後的DOM變化，這時我們就可以使用 Vue.nextTick(callback)方法。

重要參考

相關文章