徐姣 2020年11月23日

原资料文章地址：https://zhuanlan.zhihu.com/p/42117531

一、重点结论

• 任务队列中的都是已经完成的异步操作。而不是说注册一个异步任务就会被放在这个任务队列中，就像在银行中排号，如果叫到你的时候你不在，那么你当前的号牌就作废了，柜员会选择直接跳过进行下一个客户的业务处理，等你回来以后还需要重新取号。

• 而且一个宏任务在执行的过程中，是可以添加一些微任务的。在当前的微任务没有执行完成时，是不会执行下一个宏任务的。

• setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务

• 所有会进入的异步都是指的事件回调中的那部分代码。这句话的意思是new promise在实例化的时候是作为同步代码执行的。

• 在同步代码执行完成后才回去检查是否有异步任务未完成，并执行对应的回调，而微任务又会在宏任务之前执行。

• requestAnimationFrame是一个在重绘之前执行的一个操作，而重绘操作一般是宏任务之前、微任务之后执行

• 宏任务必然是在微任务之后才执行的（因为微任务实际上是宏任务的其中一个步骤）

• 典型宏任务/微任务

二、知识点梳理

requestAnimationFrame：下次页面重绘前所执行的操作，而重绘也是作为宏任务的一个步骤来存在的，该步骤晚于微任务的执行、优先于宏任务执行。

2.1、requestAnimationFrame

• window.requestAnimationFrame(): 是告诉浏览器你希望执行一个动画，并且要求浏览器在下一次重绘之前调用指定的回调函数去更新动画。

• 该方法需要传入一个回调作为参数，该回调会在下一次重绘之前之前。

• 若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

2.2 、MutationObserver

• MutationObserver是一个监听DOM所有变化的接口，他的回调会进入微任务队列。在所有的DOM操作完成后才触发使得回调函数进入微任务队列。

• EventTargetAPI的addEventListener相比：

  • 共同点: 两者的回调函数执行都是异步任务，都要在主执行栈之后执行；

  • 不同点：

    • addEventListener的回调函数会进入宏任务队列；MutationObserver的回调函数会进入微任务队列

    • addEventListener的触发方式是同步触发；比如，点击后，回调函数立即进入宏任务队列。

    • MutationObserver的监听是异步触发，在所有的DOM操作完成后才触发使回调函数进入微任务队列。

    比如，程序中有10个修改DOM的操作，只有在第十个处理完之后，回调函数才进入微任务队列。

三、经典试题分析

<div id="outer">
 <div id="inner"></div>
</div>
<script>
 const $inner = document.querySelector('#inner')
 const $outer = document.querySelector('#outer')
 // 顺序执行代码
 function handler () {
 console.log('click') // 直接输出
 Promise.resolve().then(_ => console.log('promise')) // 注册微任务
 setTimeout(_ => console.log('timeout')) // 注册宏任务
 requestAnimationFrame(_ => console.log('animationFrame')) // 注册宏任务
 $outer.setAttribute('data-random', Math.random())
 }
 // 注册一个MutationObserver微任务，当DOM的attributes属性发生变化时触发
 new MutationObserver(_ => { 
 console.log('observer') //
 }).observe($outer, {
 attributes: true
 });
​
 $inner.addEventListener('click', handler)
 $outer.addEventListener('click', handler)
 </script>

3.1 输出解析

• 定义一个handler函数， 待点击的时候再调用

• 注册一个MutationObserver监听DOM函数，待attributes属性发生变化的时候，将其回调发到微任务队列中。

• requestAnimationFrame是一个在重绘之前执行的一个操作，而重绘操作一般是宏任务之前、微任务之后执行。

• inner的监听函数， 点击后handler回调立即进入宏任务

• outer的监听函数， 点击后handler回调立即进入宏任务

• 因为click事件会冒泡，所以对应的这次I/O会触发两次handler函数(一次在inner、一次在outer)，所以会优先执行冒泡的事件(早于其他的宏任务)

3.2 点击$inner后：

一次I/O创建了一个宏任务，也就是说在这次任务中会去触发handler。

• 注册第一个宏任务handler

• 同步输出console.log('click')

• 注册一个微任务，将其回调放到微任务队列，待调用：console.log('promise')

• 注册一个宏任务，将其回调放到宏任务队列，待调用：console.log('timeout')。第五个宏任务

• 注册一个宏任务，将其回调放到宏任务队列，待调用：console.log('animationFrame')。由于重绘先于其他宏任务执行，可以认为这是第三个宏任务

• 设置DOM的attributes属性，触发一个MutationObserver微任务，将其回调放到微任务队列console.log('observer')。

3.3 点击$inner后，事件冒泡

又一次I/O创建了一个宏任务，也就是说在这次任务中会去触发handler。 触发handler回调注册一个宏任务

• 由于时间冒泡优先于其他宏任务，handler注册为第二个宏任务。

• 同步输出console.log('click')

• 注册一个微任务，将其回调放到微任务队列，待调用：console.log('promise')

• 注册一个宏任务，将其回调放到宏任务队列，待调用：console.log('timeout') 第六个宏任务

• 注册一个宏任务，将其回调放到宏任务队列，待调用：console.log('animationFrame')，由于重绘先于其他宏任务执行，可以认为这是第四个宏任务

• 设置DOM的attributes属性，触发一个MutationObserver微任务，将其回调放到微任务队列console.log('observer')。

3.4 根据上面分析，我们可以得出我们当前的宏任务列表应该如下

// 宏任务列表
const macroTaskList = [ 
      // 第一个宏任务`handler`回调：将同步任务放在第一个
      [console.log('click')、console.log('promise')、console.log('observer')],
      // 第二个宏任务`handler`回调：将同步任务放在第一个
      [console.log('click')、console.log('promise')、console.log('observer')],
      // 第三个宏任务：重绘
      [console.log('animationFrame')],
      // 第四个宏任务
      [console.log('animationFrame')],
      // 第五个宏任务
      [console.log('timeout')],
      // 第六个宏任务
      [console.log('timeout')],
]

所以输出的顺序是：

click promise observer click promise observer animationFrame animationFrame timeout timeout

3.5 上述试题变形

<script>
 $inner.addEventListener('click', handler);
 $outer.addEventListener('click', handler);
 $inner.click(); // 用click()代替了手动操作，会怎么样？？
 $inner.click();
</script>

需要注意的点

• $inner.click()不是一次有效的IO操作。这种触发事件的方式可以理解类似dispatchEvent，可以理解为同步执行的代码。也就是可以认为两次handler回调是一起执行的。

// 宏任务列表
const macroTaskList = [ 
      // 同步任务
      [console.log('click'), console.log('click')]
     //handler回调
     [console.log('promise')、console.log('observer'), console.log('promise') ],
     // 第二个宏任务：重绘
     [console.log('animationFrame'), console.log('animationFrame')],
     // 第三个宏任务
     [console.log('timeout')],
     // 第四个宏任务
    [console.log('timeout')],
]

• requestAnimationFrame是一个在重绘之前执行的一个操作，而重绘操作一般是宏任务之前、微任务之后执行。所有它最终先于timeout执行

• MutationObserver的监听不会说同时触发多次，多次修改只会有一次回调被触发。所有两次只有一次触发把回调放到队列中。

• 所有最终的输出结果是：click click promise observer promise animationFrame animationFrame timeout timeout