在浏览 nextTick 的源码之前，要先弄邃晓 JS 实行状况运转机制，引见 JS 实行状况的事宜轮回机制的文章许多，大部分都论述的对照笼统，以至有些文章说的是毛病的，以下为小我明白，若有毛病，迎接斧正。
一、浏览器中的历程与线程
以 chorme 浏览器为例，浏览器中的每一个页面都是一个自力的历程，在该历程中具有多个线程，一样平常有以下几个常驻线程：
1、GUI 衬着线程
2、JavaScript引擎线程
3、准时触发器线程
4、事宜触发线程
5、异步http要求线程
GUI 衬着线程剖析 html 天生 DOM 树，剖析 css 天生 CSSOM 树，然后将两棵树合并成衬着树，末了依据衬着树画出界面。当 DOM 的修正致使了款式非多少属性的转变时，衬着线程从新绘制新的款式，称为“重绘”；当 DOM 的修正致使了款式多少属性的转变，衬着线程会从新盘算元素的鸠合属性，然后将效果绘制出来，称为“回流”。
JS 引擎线程负责处置惩罚Javascript剧本递次，且与GUI 衬着线程是互斥的，由于 js 是可以或许操控 DOM 的，若是这两个线程并行会致使毛病。JS 引擎线程与其他可以或许并行的线程合营来完成称为Event Loop的 javaScript 实行状况运转机制。
JS 的运转状况是单线程的，在代码中若是挪用形如 setTimeout() 如许的计时功用的 API ，JS 引擎线程会将该义务交给准时触发器线程。准时触发器线程在准时终了以后会将义务放入义务行列中，守候 JS 引擎线程读取。
JS 与 HTML 之间的交互是经由历程事宜来完成的。在 JS 代码中运用侦听器来预定事宜，以便事宜发作时实行响应的代码，该代码称为事宜处置惩罚递次或许事宜侦听器。比方点击事宜的事宜侦听器是 onclick 。JS 引擎线程在实行侦听 DOM 元素的代码时，会将该义务交给事宜触发线程处置惩罚，当事宜被触发时，事宜触发线程会将义务放入义务行列中，守候 JS 引擎线程读取。
JS 代码中经由历程 XMLHttpRequest 提议 ajax 要求时，会运用异步http要求线程来治理，在状况转变时，该线程会将对应的回调放入义务行列中，守候 JS 引擎线程读取。
二、Event Loop
Javascript 义务分为同步义务和异步义务，同步义务是指挪用以后立时获得效果的义务；异步义务是指挪用以后没法立时获得效果，须要举行分外操纵的义务。
JS 引擎线程递次实行实行栈中的义务，实行栈中只要同步义务，碰到异步义务就交给响应的线程处置惩罚。比方在代码块中有 setTimeout() 要领的挪用，则将其交由准时触发器线程处置惩罚，准时终了以后准时触发器线程将要领的回调放入本身的义务行列中，当实行栈中的义务处置惩罚完以后会读取各线程中义务行列中的事宜。
前面是从同步异步的角度来离别义务的，从实行递次来讲，义务也分为两种：macrotask（宏义务）、microtask（微义务）。异步的 macrotask 实行完以后返回的事宜会放在各线程的义务行列中，microtask 实行完以后返回的事宜会放在微义务行列中。
macrotask包罗：script（JS文件）、MessageChannel、setTimeout、setInterval、setImmediate、I/O、ajax、eventListener、UI rendering。
microtask包罗：Promise、MutationObserver、已烧毁的Object.observe()、Node中的process.nextTick
个中须要注重的是GUI 衬着线程去衬着页面也是以 macrotask 的情势举行的，这个以后详谈。
JS 实行状况运转机制——Event Loop（事宜轮回）的历程如上图所示：
1、JS 引擎线程递次实行实行栈中的义务，以一个 macrotask 为单元，在单个宏义务没有处置惩罚完之前，JS 引擎线程不会将递次交由GUI 衬着线程接受。也就是说耗时的义务会壅塞衬着，致使页面卡顿的状况发作。典范浏览器一样平常1秒钟插进去60个衬着帧，也就是说16ms举行一次衬着，单个义务凌驾16ms，若是衬着树发作转变将得不到实时更新衬着。
流通的页面中一样平常义务实行状况以下所示：
单个义务耗时较多，则会发作丢帧的状况：
2、JS 引擎线程在实行 macrotask 时，会将碰到的异步义务交给指定的线程处置惩罚。当异步义务为 macrotask 时，对应线程处置惩罚终了以后放入线程本身的义务行列中；若异步义务为 microtask 时，对应线程处置惩罚终了以后放入微义务行列中。macrotask 实行完以后会遍历微义务行列中的义务加以实行，清空微义务行列。
3、当实行栈中的义务实行终了后，会读取各个线程中的义务行列，将各义务行列中的事宜增加到实行栈中最先实行。从读取各义务行列中的事宜放入实行栈中到清空微义务行列的历程称为一个“tick”。JS引擎线程会轮回赓续地读取义务、处置惩罚义务，这个就称为Event Loop（事宜轮回）机制。
三、nextTick的完成
Vue的数据更新接纳的是异步更新的体式格局，如许的优点是数据属性屡次求值只不消反复挪用衬着函数，可以或许大幅进步机能。个中，异步更新行列是经由历程挪用 nextTick 要领完成的。
Vue是数据驱动的框架，最好的状况是在页面从新衬着前完成数据的更新。夙昔面的报告中可以或许晓得，浏览器的运转机制是起首实行 macrotask，然后实行 microtask ，清空微义务行列后，再从各线程的义务行列中读取新的事宜之前，GUI 衬着线程有能够接受递次，完成页面从新衬着。
nextTick() 在2.5版本以后被零丁提取到一个 js 文件中，而且转变了其完成体式格局。下面离别引见两种详细完成状况：
1、Vue2.5+ 版本完成体式格局
Vue2.5.22 版本的 nextTick() 完成以下所示：
export function nextTick (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
if (useMacroTask) {
macroTimerFunc()
} else {
microTimerFunc()
}
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
} 起首申明个中三个变量，callbacks 是存储异步更新回调的义务行列、pending 标识义务行列是不是正在革新、useMacroTask 变量注解是不是强迫运用 macrotask 体式格局实行回调。
nextTick() 注册一个实行传入回调的函数放入到 callbacks 数组中，若是没有传入回调则返回 Promise 对象。若是行列没有最先革新，则将守候革新标识设为 true，最先革新义务。若是没有强迫指明须要运用 macrotask 的体式格局革新，则默许挪用 microTimerFunc 要领来实行。
microTimerFunc 要领的完成以下代码所示：
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
macroTimerFunc = () => { setImmediate(flushCallbacks) }
} else if (typeof MessageChannel !== 'undefined' && (
isNative(MessageChannel) ||
MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
const channel = new MessageChannel()
const port = channel.port2
channel.port1.onmessage = flushCallbacks
macroTimerFunc = () => { port.postMessage(1) }
} else {
macroTimerFunc = () => { setTimeout(flushCallbacks, 0) }
}
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
microTimerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
} else {
microTimerFunc = macroTimerFunc
} microTimerFunc 要领本质就是将 flushCallbacks 要领注册成异步义务加以实行。
优先运用 Promise 的体式格局将 flushCallbacks() 的实行注册成 microtask；个中须要注重的是在有的ios状况下，纵然将义务推到微义务行列中，行列也不会立时革新，直到浏览器须要做一些别的的事情，因此在此处增加一个空的计时器来使微义务行列革新。
若是状况不兼容 Promise，则将 flushCallbacks() 的实行注册成 macrotask。优先运用 setImmediate 注册义务，setImmediate() 机能好、优先级高，然则兼容性很差，现在只要 IE 浏览器支撑。其次运用 MessageChannel 完成，若是都不支撑，则挪用 setTimeout() 完成。
flushCallbacks() 的完成体式格局以下所示：
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
} 起首将是不是革新的标识设为 false ，然后复制 callbacks 数组到 copies ，再清空 callbacks 数组，遍历 copies 实行每一个回调。这里将 callbacks 清空、遍历复制数组 copies 的缘由是为了防备在遍历实行回调的历程当中，赓续有新的回调增加到 callbacks 数组中的状况发作。
2、老版本完成体式格局
Vue2.4.4 版本的 nextTick() 完成与2.5+ 版本的差别主如果下面这段代码：
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
if (isIOS) setTimeout(noop)
}
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, { characterData: true })
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
timerFunc = () => {setTimeout(nextTickHandler, 0)}
} 老版本的 nextTick() 与2.5+ 版本的最主要区别是将义务注册成异步行列的体式格局分歧。优先运用 Promise 将义务注册成 microtask，其次运用 MutationObserver 将义务注册成 microtask。若是状况不允许将义务注册成 microtask，则直接运用 setTimeout() 将义务注册成 macrotask。
可以或许看出老版本的 nextTick() 对机能的寻求特别高，基本上都是接纳 microtask 来完成异步更新的，macrotask 没有辨别层级，直接运用 setTimeout() 来末了兜底。
MutationObserver 的优先级特别高，在某些场景下它以至要比事宜冒泡还要快，会致使许多题目。若是悉数运用 macrotask 则对一些有重绘和动画的场景也会有机能影响。以是 Vue2.5+ 版本删除对 MutationObserver 的运用，增强了 macrotask 的运用。
如需转载，烦请说明出处：https://www.cnblogs.com/lidengfeng/p/10856352.html
Comment here is closed