@zhouweicsu
2018-05-22T16:37:12.000000Z
字数 2812
阅读 835
JavaScript 事件循环 Vue
虽然 Vue 建议避免直接操作 DOM，但在业务开发中，有时候不得不在数据变化之后操作 DOM，然而我们知道 Vue 默认是异步执行 DOM 更新，数据变化之后所有需要更新的 Watcher 会被推入一个队列，然后，在下一个的事件循环 “tick” 中，Vue 刷新队列并执行更新。那如果我想在数据变化之后操作 DOM 该如何做呢？Vue 提供了 nextTick 方法。
在 Vue 源码 2.1.10 版本中 nextTick 的实现采用优雅降级的 3 种方式：Promise、MutationObserver 和 setTimeout。到最新的一个版本的 2.5.16 改为了 setImmediate、MessageChannel、Promise 和 setTimeout。
作者在源码中给出了如下的注释：
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).
大概意思就是 nextTick 方法使用了 microtask 和 (macro) task。低于 2.4 的版本中到处都用 microtask，但有些场景下因为 microtask 优先级太高执行的太早了，然而用 (macro) task 也有一些小问题。所以，默认还是使用 microtask，但提供一种方式在必要的情况下可以使用 (macro) task。
注释中提到了两个名词：microtask 和 (macro) task，这两个是属于 JavaScript Event Loop（事件循环）中的概念。上面提到的 Promise（浏览器原生实现）、MutationObserver、MessageChannel 属于 microtask，setImmediate 和 setTimeout 属于 (macro) task。
分类：
(macro) task：script（整体代码）、setTimeout、setInterval、 setImmediate、requestAnimationFrame、I/O、UI Rendering。
microtask：process.nextTick、Promise、Object.observe、MutationObserver。
我们知道 JavaScript 是单线程语言，所有任务都在主线程上排队等待执行（在执行栈中执行）。但那些耗时的 I/O 操作或者 Ajax 异步请求，线程不可能一直等待，所以，JavaScript 将任务分为同步任务和异步任务，同步任务（我理解就是整体代码）在主线程上排队顺序执行，异步任务分为 (macro) task 和 microtask，基于事件循环机制执行任务。主线程上的同步任务执行完了（即主线程空闲时），才会执行异步任务。
事件循环由三部分组成：执行 (macro) task，执行 microtask，UI 渲染。具体步骤：执行一个 (macro) task（整体代码也是一个 macro task），然后清空 microtask 队列，最后 UI 渲染（并不是每次都会执行渲染，浏览器只需保证 60Hz 的刷新率即可）。
看一下浏览器执行一次 UI 渲染的基本流程：
可以看到，一次 UI 渲染浏览器的计算量是非常大的，所以 Vue 在 nextTick 函数的实现中优先使用 microtask，因为一次渲染之前只会执行一个 (macro) task，但会执行完所有的 microtask。
看一个常见的面试题：
console.log('start')setTimeout( function () {console.log('setTimeout')}, 0 )new Promise(function() {console.log('promise0')}).then(function() {console.log('promise1');}).then(function() {console.log('promise2');});console.log('end')// start// promise0// end// promise1// promise2// setTimeout
其中整块代码是属于同步代码，setTimeout 是 (macro) task，Promise 是 microtask。所以，先顺序执行代码，输出 start，然后将 setTimeout 放入 异步的 (macro) task 队列，初始化 Promise 会立即执行输出 promise0，then 的回调会放入异步的 microtask 队列，再顺序执行输出 end。这时主进程空闲，会优先处理 microtask，输出 promise1 和 promise2，microtask 队列被清空，再取一个 (macro) task 队列中的任务执行，输出 setTimeout。
事件循环中，microtask 队列只有一个，但 (macro) task 队列不止一个，每个 task 都有一个 task source，每个 source 对应一个队列，相应的优先级也不一样，这里就不展开写。
注意：浏览器中的 Event Loop 和 Node.js 中的 Event Loop 不一样。