瀏覽器事件循環（結合vue nextTick）

在介紹事件循環以前咱們先簡單瞭解（回顧）一下瀏覽器相關常識

瀏覽器常識介紹

同步和異步

• 同步：就是在執行棧中（主線程）執行的代碼
• 異步：就是在異步隊列（macroTask、microTask）中的代碼

簡單理解區別就是：異步是須要延遲執行的代碼

線程和進程

• 進程：進程是應用程序的執行實例，每個進程都是由私有的虛擬地址空間、代碼、數據和其它系統資源所組成；進程在運行過程當中可以申請建立和使用系統資源（如獨立的內存區域等），這些資源也會隨着進程的終止而被銷燬

• 線程：線程則是進程內的一個獨立執行單元，在不一樣的線程之間是能夠共享進程資源的，是進程內能夠調度的實體。比進程更小的獨立運行的基本單位。線程也被稱爲輕量級進程。

簡單講，一個進程可由多個線程構成，線程是進程的組成部分。

js是單線程的，但瀏覽器並非，它是通常是多進程的。

以chrome爲例： 一個頁籤就是一個獨立的進程。而javascript的執行是其中的一個線程，裏面還包含了不少其餘線程，如：

• GUI渲染線程
• http請求線程
• 定時器觸發線程
• 事件觸發線程
• 圖片等資源的加載線程。

事件循環

ok，常識性內容回顧完畢，咱們開始切入正題。

microTask 和 macroTask

常見的macroTask有：setTimeout、setInterval、setImmediate、i/o操做、ui渲染、MessageChannel、postMessage

常見的microTask有：process.nextTick、Promise、Object.observe(已廢棄)、MutationObserver(html5新特性)

用線程的理論理解隊列：

• macroTask由事件觸發線程維護
• microTask一般由js引擎本身維護

一個完整的事件循環（Event loop）過程解析

• 初始狀態：調用棧（主線程）、microTask隊列、macroTask隊列，macroTask裏只有一個待執行的script腳本，好比：入口文件。（如上圖）

• 將這個macro任務（入口文件）推入調用棧，同步執行代碼。在這過程當中，會調用一些接口或者觸發一些事件，可產生新的marcoTask與microTask。它們分別會被推入各自的任務隊列。同時該script腳本會被從macroTask中移除（主線程的執行過程就是一個 tick）（如上圖）

• 調用棧代碼執行完當前的代碼塊後，須要處理microTask中的任務。將裏面的任務依次推入調用棧執行。固然，在執行microTask中的任務時一樣可能產生新的macroTask和microTask，一樣插入對應的隊列中（如上圖）

• 而後繼續執行microTask餘下的任務，直至全部micro任務都執行完成。（如上圖）

• 而後進行渲染操做，更新界面 （如上圖）

以上就是一次完整的事件循環。

整個流程用一個簡單的圖表示以下：

而後將macroTask中優先級最高的任務推入主線程，繼續執行上述過程

注意：單次事件循環中，macroTask的任務僅處理優先級最高的那一個，而microTask要執行完全部。

渲染時機

通過上面的學習咱們把異步拿到的數據放在macroTask中仍是microTask中呢？

好比先放在macroTask中：

setTimeout(task, 0)
複製代碼

那麼按照Event loop，task會被推入macroTask中，本次調用棧內容執行完，會執行microTask中的內容，而後進行render。而本次事件循環render內容是不包含task的，由於他還在macroTask中還沒有執行，須要等到下次事件循環才能進行渲染

若是放在microTask中：

Promise.resolve().then(task)
複製代碼

那麼按照Event loop，task會被推入microTask中，本次調用棧內容執行完，會執行microTask中的task內容，而後進行render，也就是在本次的事件循環中就能夠進行渲染。

總結：咱們在異步任務中修改dom是儘可能在microTask完成。

Vue next-tick

vue nextTick是幹什麼用的？

咱們先來看一段代碼

getData().then(res => {
  this.xxx = res.data.xxx
  this.$nextTick(() => {
    // 這裏咱們能夠獲取更新後的 DOM
  })
})
複製代碼

這段代碼很簡單，但實際上用到了兩次nextTick。

this.$nextTick()是一次顯式調用，沒啥說的。主要是這行

this.xxx = res.data.xxx
複製代碼

這一行是常見的vue參數設置，而後更新dom，那麼它怎麼就和nextTick產生聯繫了呢？

這就會涉及vue的數據響應原理

當設置新的參數時，會觸發對應屬性的set攔截，而後觸發dep的notify方法，進而調用watcher的update方法，再由update調用queueWathcer，最終調用nextTick方法

vue 數據更新爲何要採用nextTick異步隊列更新呢？

先看個例子

data () {
  return {
    count: 0
  }
},
mounted () {
  for (let i = 0; i < 1000; i++) {
    this.count++
  }
}
複製代碼

若是不用異步隊列，每一次set劫持都作render的話，那麼render會執行1000次，會很是浪費性能。

若是把這些更新統統放在異步隊列裏，意味着，會觸發1000次watcher的queueWathcer方法。 但有一點注意，queueWathcer裏面經過id對watcher作了去重處理，雖然被調用了1000次，但有效調用只有一次。同時也保證，在一個ticket中，同一個參數即便被修改屢次，咱們在執行wather.update時候仍然保證渲染的是最新的數據。

因此使用nextTick進行渲染，也是vue的一大優化

vue nextTick實現

Vue2.5之後，採用單獨的next-tick.js來維護它。

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

// 全部的callback緩存在數組中
const callbacks = []
// 狀態
let pending = false

// 調用數組中全部的callback，並清空數組
function flushCallbacks () {
  // 重置標誌位
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 調用每個callback
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// Here we have async deferring wrappers using both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).

// 微任務function
let microTimerFunc
// 宏任務fuction
let macroTimerFunc
// 是否使用宏任務標誌位
let useMacroTask = false

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it’s only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */

// 優先檢查是否支持setImmediate，這是一個高版本 IE 和 Edge 才支持的特性（和setTimeout差很少，但優先級最高）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
// 檢查MessageChannel兼容性（優先級次高）
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
// 兼容性最好（優先級最低）
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// Determine microtask defer implementation.
/* istanbul ignore next, $flow-disable-line */

// 微任務用promise來處理
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  microTimerFunc = () => {
    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)
  }
// promise不支持直接用宏任務
} else {
  // fallback to macro
  microTimerFunc = macroTimerFunc
}

/**
 * Wrap a function so that if any code inside triggers state change,
 * the changes are queued using a (macro) task instead of a microtask.
 */
// 強制走宏任務，好比dom交互事件，v-on （這種狀況就須要強制走macroTask）
export function withMacroTask (fn: Function): Function {
  return fn._withTask || (fn._withTask = function () {
    useMacroTask = true
    const res = fn.apply(null, arguments)
    useMacroTask = false
    return res
  })
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 緩存傳入的callback
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 若是pending爲false，則開始執行
  if (!pending) {
    // 變動標誌位
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  // 當爲傳入callback，提供一個promise化的調用
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}
複製代碼

這段代碼主要定義了Vue.nextTick的實現。 核心邏輯：

• 定義當前環境支持的microTimerFunc和macroTimerFunc（調用時會執行flushCallbacks方法）
• 外部調用nextTick時，會緩存傳入的callback
• pending設置爲false，變動標誌位，執行microTimerFunc或macroTimerFunc(也就是執行flushCallbacks方法)
• 執行完flushCallbacks後，pending重置爲false，清空數組

因此vue的數據更新是一個異步的過程。

思考問題

仍是以前的例子

getData().then(res => {
  this.xxx = res.data.xxx
  this.$nextTick(() => {
    // 這裏咱們能夠獲取更新後的 DOM
  })
})
複製代碼

這裏提一個疑問~

前面不是說UI Render是在microTask都執行完以後才進行麼。

而經過對vue的$nextTick分析，它實際是用promise包裝的，屬於microTask。

在getData.then中，執行了this.xxx= res.data，它實際也是經過wather調用$nextTick

隨後，又執行了一個$nextTick

按理說目前還處在同一個事件循環，並且尚未進行UI Render，怎麼在$nextTick就能拿到剛渲染的dom呢？

UI render理解

咱們先看一個例子

<template>
  <div>
    <div class="title" ref="test">{{title}}</div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Index extends Vue {
// 和vue data()是同樣的，咱們這裏是ts寫法
title: string = 'nothing'

mounted () {
  // 模擬接口獲取數據
  setTimeout(() => {
    this.title = '測試標題'

    this.$nextTick(() => {
      console.log('debug:', this.title, this.$refs.test['innerHTML'])
      alert('渲染完了麼?')
    })
  }, 0)
}
</script>
<style lang="scss">
.title{
  font-size: pxToRem(158px);
  text-align: center;
}
</style>
複製代碼

看看瀏覽器的渲染狀況

由於alert可以阻塞渲染，因此這裏用到它。

在alert以前咱們console了最新設置dom的內容，從控制檯已經拿到了最新設置的title。可是瀏覽器尚未進行渲染。再點擊「肯定」後，瀏覽器才進行渲染。

我以前一直覺得獲取新的dom節點必須等UI Render完成以後才能獲取到，然而並非這樣的。

結論：

在主線程及microTask執行過程當中，每一次dom或css更新，瀏覽器都會進行計算，而計算的結果並不會被馬上渲染，而是在當全部的microTask隊列中任務都執行完畢後，統一進行渲染（這也是瀏覽器爲了提升渲染性能和體驗作的優化）因此，這個時候經過js訪問更新後的dom節點或者css是能夠拿到的，由於瀏覽器已經完成計算，僅僅是它們還沒被渲染而已。

這也就完美解決了我以前的疑問。

OK，以上就是對瀏覽器事件循環所有介紹，歡迎你們學習交流