vue 任务队列和异步更新策略（清晰理解任务队列、微任务、宏任务）

小鱼儿 2023-02-21 09:31 23阅读 0赞

##### 事件循环 #####

> JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。

##### 任务队列 #####

**vue 数据驱动视图是数据改变,视图异步等待所有数据变化完成,统一进行视图更新。**

既然是异步就有顺序和优先级, 异步任务队列是那种顺序执行 ?

*tip:* *微任务优先级高于宏任务* [MDN 介绍][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来执行它。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]

> 其大概的意思就是：在Vue 2.4之前的版本中，nextTick 几乎都是基于 microTask 实现的（具体可以看文章nextTick一节），但是由于 microTask 的执行优先级非常高，在某些场景之下它甚至要比事件冒泡还要快，就会导致一些诡异的问题；但是如果全部都改成 macroTask，对一些有重绘和动画的场景也会有性能的影响。所以最终 nextTick 采取的策略是默认走 microTask，对于一些DOM的交互事件，如 v-on绑定的事件回调处理函数的处理，会强制走 macroTask。

具体做法就是，在Vue执行绑定的DOM事件时，默认会给回调的handler函数调用withMacroTask方法做一层包装，它保证整个回调函数的执行过程中，遇到数据状态的改变，这些改变而导致的视图更新（DOM更新）的任务都会被推到macroTask。

源码：

最后，写一段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会出现频繁渲染视图造成页面卡顿,极端的消耗资源。所以异步更新大大提升了性能, 并且数据更新很高效体验并没有降低

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200630113732637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz,size_16,color_FFFFFF,t_70#pic_center