vue中的任务队列和异步更新策略(任务队列,微任务,宏任务)
作者：June.1
事件循环
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。
Event Loop 包含两类：
- 一类是基于 Browsing Context
- 一种是基于 Worker
二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。
任务队列
vue 数据驱动视图是数据改变,视图异步等待所有数据变化完成,统一进行视图更新。
既然是异步就有顺序和优先级, 异步任务队列是那种顺序执行 ?
tip: 微任务优先级高于宏任务 MDN 介绍
任务队列主要分为两种：
1、microtasks（微任务）：
Promise:ES6的异步处理方案process.nextTick（vue.nextTick）：下轮tick更新机制,Mutation Observer API： DOM改变 监听 API
2、macrotasks（宏任务也称任务）：
setTimeout(): 延时器setInterval(): 计时器setImmediate：node.js 回调函数延迟执行,process.nextTicl() 方法十分类似
process.nextTick()中的回调函数执行的优先级要高于setImmediate().这里的原因在于事件循环对观察者的检查是有先后顺序的，process.nextTick()属于idle观察者，setImmediate()属于check观察者。在每一个轮循环检查中，idle观察者先于I/O观察者，I/O观察者先于check观察者。
在具体实现上，process.nextTick()的回调函数保存在一个数组中，setImmediate()的结果则是保存在链表中。在行为上，process.nextTick()在每轮循环中会将该数组中的回调函数全部执行完，而setImmediate()在每轮循环中执行链表中的一个回调函数
I/O：系统IO(input/output)UI render：页面渲染requestAnimationFrame()：异步动画渲染 ,浏览器调用指定的函数以在下次重绘之前更新动画
如何理解微任务和宏任务?
创造代码的人也是人，他们的灵感多数来自于生活。我们这里打个比方（朴灵老师也这样比喻），javascript处理异步就像去餐馆吃饭，服务员会先为顾客下单，下完单把顾客点的单子给后厨让其准备，然后就去服务下一位顾客，，而不是一直等待在出餐口。
javascript将顾客下单的行为进行了细分。无外乎两种酒水类和非酒水类。对应着我们javascript中的macroTask和microTask。
但是在不同场景下的步骤是不一样的，就像西餐和中餐。西餐划分的非常详细：头盘->汤->副菜->主菜->蔬菜类菜肴->甜品->咖啡，中餐就相对简单许多：凉菜->热菜->汤。
任务队列,下面看几个示例, 输出内容便是执行顺序：
任务队列,下面看几个示例, 输出内容便是执行顺序：
setTimeout(()=>{
console.log('1')
Promise.resolve().then(function() {
console.log('2')
})
}, 0)
setTimeout(()=>{
console.log('3')
Promise.resolve().then(function() {
console.log('4')
})
}, 0)
setTimeout(function() {console.log('6')}, 0)
requestAnimationFrame(function(){
console.log('5')
})
setTimeout(function() {console.log('7')}, 0)
new Promise(function executor(resolve) {
console.log('1')
resolve()
console.log('2')
}).then(function() {
console.log('4')
})
console.log('3')
console.log('1');
setTimeout(() => {
console.log('5');
process.nextTick(() => console.log('6'));
}, 0);
process.nextTick(() => {
console.log('3');
process.nextTick(() => console.log('4'));
});
console.log('2');
这样就可以理解Vue的异步更新策略运行机制
created() {
this.textDemo()
},
methods: {
textDemo() {
console.log(1)
setTimeout(() => { // macroTask
console.log(4)
setTimeout(() => { // macroTask
console.log(8)
}, 0)
this.$nextTick(() => { // microTask
console.log(5)
})
Promise.resolve().then(function() { // microTask
console.log(7)
})
this.$nextTick(() => { // microTask
console.log(6)
})
}, 0)
this.$nextTick(() => { // microTask
console.log(3)
})
console.log(2)
},
}
到此我们已经知道代码是如何运行的了, 如果你想要更深入理解, 请继续向下阅读。
深究Vue异步更新策略原理
我们先看一个示例：
<template>
<div>
<div ref="test">{{test}}</div>
<button @click="handleClick">tet</button>
</div>
</template><script>
export default {
data () {
return {
test: 'begin'
};
},
methods () {
handleClick () {
this.test = 'end';
console.log(this.$refs.test.innerText);// 结果输出 begin
}
}
}
</script>通过上面示例可以看出 Vue是异步执行DOM更新, 更新会缓冲到队列中, 在nextTick 集中刷新队列并执行实际 (已去重的) 工作
当然新版 this.$nextTick 有一些变化 。从Vue 2.5+开始，抽出来了一个单独的文件next-tick.js来执行它。
其大概的意思就是：在Vue 2.4之前的版本中，nextTick 几乎都是基于 microTask 实现的（具体可以看文章nextTick一节），但是由于 microTask 的执行优先级非常高，在某些场景之下它甚至要比事件冒泡还要快，就会导致一些诡异的问题；但是如果全部都改成 macroTask，对一些有重绘和动画的场景也会有性能的影响。所以最终 nextTick 采取的策略是默认走 microTask，对于一些DOM的交互事件，如 v-on绑定的事件回调处理函数的处理，会强制走 macroTask。
具体做法就是，在Vue执行绑定的DOM事件时，默认会给回调的handler函数调用withMacroTask方法做一层包装，它保证整个回调函数的执行过程中，遇到数据状态的改变，这些改变而导致的视图更新（DOM更新）的任务都会被推到macroTask。
源码：
function add$1 (event, handler, once$$1, capture, passive) {
handler = withMacroTask(handler);
if (once$$1) { handler = createOnceHandler(handler, event, capture); }
target$1.addEventListener(
event,
handler,
supportsPassive
? { capture: capture, passive: passive }
: capture
);
}
/**
* Wrap a function so that if any code inside triggers state change,
* the changes are queued using a Task instead of a MicroTask.
*/
function withMacroTask (fn) {
return fn._withTask || (fn._withTask = function () {
useMacroTask = true;
var res = fn.apply(null, arguments);
useMacroTask = false;
return res
})
}
最后，写一段DEMO验证一下 ：
<template> <div> <button @click="handleClick">change</button> </div> </template>
<script>
export default {
created() {
this.handleClick() // 得出结果 ： 2 3 1 4
},
methods: {
handleClick() {
setTimeout(() => { // macroTask
console.log(4)
}, 0)
this.$nextTick(() => { // microTask
console.log(2)
})
Promise.resolve().then(function() { // microTask
console.log(1)
})
this.$nextTick(() => { // microTask
console.log(3)
})
}
}
}
</script>在Vue 2.5+中，这段代码的输出顺序是1 - 2 - 3 - 4， 而 Vue 2.4 和 不通过DOM 输出 2 - 3 - 1 - 4。nextTick执行顺序的差异正好说明了上面的改变。
tips： 所以这里需要留意遇到DOM操作, 同步执行受阻或者节点内容未及时更新可以使用 this.$nextTick 等待一下在执行下面的操作。
<div id="example">
<audio ref="audio"
:src="url"></audio>
<span ref="url"></span>
<button @click="changeUrl">click me</button>
</div>
<script>
const musicList = [
'http://sc1.111ttt.cn:8282/2017/1/11m/11/304112003137.m4a?tflag=1519095601&pin=6cd414115fdb9a950d827487b16b5f97#.mp3',
'http://sc1.111ttt.cn:8282/2017/1/11m/11/304112002493.m4a?tflag=1519095601&pin=6cd414115fdb9a950d827487b16b5f97#.mp3',
'http://sc1.111ttt.cn:8282/2017/1/11m/11/304112004168.m4a?tflag=1519095601&pin=6cd414115fdb9a950d827487b16b5f97#.mp3'
];
var vm = new Vue({
el: '#example',
data: {
index: 0,
url: ''
},
methods: {
changeUrl() {
this.index = (this.index + 1) % musicList.length
this.url = musicList[this.index];
this.$refs.audio.play();
}
}
});
</script>
毫无悬念，这样肯定是会报错的：
Uncaught (in promise) DOMException: The element has no supported sources.
原因就在于audio.play()是同步的，而这个时候DOM更新是异步的，src属性还没有被更新，结果播放的时候src属性为空，就报错了。
解决办法就是在play的操作加上this.$nextTick()。
this.$nextTick(function() {
this.$refs.audio.play();
});
异步更新有什么好处?
<template>
<div>
<div>{{test}}</div>
</div>
</template>
<script>
export default {
data () {
return {
test: 0
};
},
mounted () {
for(let i = 0; i < 1000; i++) {
this.test++;
}
}
}
</script>
上面的例子非常直观，可以这么理解当数据更新同步操作DOM会出现频繁渲染视图造成页面卡顿，极端的消耗资源。所以异步更新大大提升了性能, 并且数据更新很高效体验并没有降低。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue在使用ECharts时的异步更新和数据加载详解
- vue的状态更新方式(异步更新解决)
- VUE异步更新DOM - 用$nextTick解决DOM视图的问题
- 详解Vue的异步更新实现原理
- 浅谈Vuejs中nextTick()异步更新队列源码解析
- vue中$nextTick的用法讲解
- Vue中this.$nextTick的作用及用法
- Vue中的nextTick作用和几个简单的使用场景
- Vue中this.$nextTick()的理解与使用方法
- 简单理解Vue中的nextTick方法
- vue2.0$nextTick监听数据渲染完成之后的回调函数方法
- 深入理解Vue nextTick 机制
- Vue2异步更新及nextTick原理详解