任务队列中的都是已经完成的异步操作。而不是说注册一个异步任务就会被放在这个任务队列中，就像在银行中排号，如果叫到你的时候你不在，那么你当前的号牌就作废了，柜员会选择直接跳过进行下一个客户的业务处理，等你回来以后还需要重新取号。
而且一个宏任务在执行的过程中，是可以添加一些微任务的。在当前的微任务没有执行完成时，是不会执行下一个宏任务的。
setTimeout
就是作为宏任务来存在的，而
Promise.then
则是具有代表性的微任务
所有会进入的异步都是指的事件回调中的那部分代码。这句话的意思是new promise在实例化的时候是作为同步代码执行的。
在同步代码执行完成后才回去检查是否有异步任务未完成，并执行对应的回调，而微任务又会在宏任务之前执行。
requestAnimationFrame是一个在重绘之前执行的一个操作，而重绘操作一般是宏任务之前、微任务之后执行
宏任务必然是在微任务之后才执行的（因为微任务实际上是宏任务的其中一个步骤）
典型宏任务/微任务
|
任务类型
|
任务名称
|
|
宏任务
|
I/O操作、setTimeout、setInterval、setImmediate、requestAnimationFrame
|
|
微任务
|
process.nextTick、MutationObserver、Promise.then catch finally
|
二、知识点梳理
requestAnimationFrame：下次页面重绘前所执行的操作，而重绘也是作为宏任务的一个步骤来存在的，该步骤晚于微任务的执行、优先于宏任务执行。
2.1、requestAnimationFrame
window.requestAnimationFrame(): 是告诉浏览器你希望执行一个动画，并且要求浏览器在下一次重绘之前调用指定的回调函数去更新动画。
该方法需要传入一个回调作为参数，该回调会在下一次重绘之前之前。
若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
2.2 、MutationObserver
MutationObserver是一个监听DOM所有变化的接口，他的回调会进入微任务队列。在所有的DOM操作完成后才触发使得回调函数进入微任务队列。
EventTargetAPI的addEventListener相比：
共同点
: 两者的回调函数执行都是异步任务，都要在主执行栈之后执行；
不同点
：
addEventListener的回调函数会进入宏任务队列；MutationObserver的回调函数会进入微任务队列
addEventListener的触发方式是同步触发；比如，点击后，回调函数立即进入宏任务队列。
MutationObserver的监听是异步触发，在所有的DOM操作完成后才触发使回调函数进入微任务队列。
比如，程序中有10个修改DOM的操作，只有在第十个处理完之后，回调函数才进入微任务队列。
<
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
())
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是一个在重绘之前执行的一个操作，而重绘操作一般是宏任务之前、微任务之后执行。
inn
er
.
a
dd
E
v
e
n
t
L
i
s
t
e
n
er
(
′
c
l
i
c
k
′
,
han
d
l
er
)
；注册一个
inner的监听函数， 点击后handler回调立即进入宏任务
o
u
t
er
.
a
dd
E
v
e
n
t
L
i
s
t
e
n
er
(
′
c
l
i
c
k
′
,
han
d
l
er
)
：注册一个
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 = [
[console.log('click')、console.log('promise')、console.log('observer')],
[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')]
[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
