JS事件循环机制（Event loop）之宏任务/微任务(个人笔记)

本文参考：http://blog.alanwu.site/2020/03/06/eventLoop/

image.png

事件循环

我们知道JavaScript是单线程的，意思就是一个时间只能做一件事情。就比如车站过安检一样，都会一个个通过，这就是单线程。那么这样问题就来了，假如程序中有一个很慢的http请求，用户必须要等待响应才可以继续后续的操作，这样就不妥了。所以我们就让长时间请求的程序代码挂起，让用户先操作其他事情。

在JavaScript中，我们把任务分为同步任务和异步任务。首先我们看一段代码的执行顺序。

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

//执行结果：script start=>script end=>promise1 =>promise2=>setTimeout

为什么会是这样的结果，因为任务进入执行栈之后会判断一下是否是同步任务，若是同步任务就会进入主线程执行；异步任务就会到事件表里面注册回调函数到事件队列。

同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数
当指定的事情完成时，Event Table会将这个函数移入Event Queue
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)

image.png

执行栈在执行完同步任务后，查看执行栈是否为空，如果执行栈为空，就会去检查微任务(microTask)队列是否为空，如果为空的话，就执行Task（宏任务），否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后，检查微任务(microTask)队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务(microTask)后，设置微任务(microTask)队列为null，然后再执行下一个宏任务，如此循环。

宏任务和微任务

上面我们知道有同步任务和异步任务，那么异步任务里面到底是如何分类呢？其实异步任务是包含宏任务和微任务，他们会加在同一个队列里面，只是执行顺序不一样而已。

image.png

宏任务：整体代码script、setTimeout、setInterval、setImmediate

微任务：原生Promise中then方法、process.nextTick、MutationObserver

对于宏任务和微任务我们只要记住以上几种就好。

我们重点来了解一下setTimeout的执行过程：

setTimeout(() => {
 task();
},3000)
console.log('执行console');

根据事件循环的过程我们知道程序先执行打印操作然后再执行定时器，但是我们稍微修改一下函数

setTimeout(() => {
 task()
},3000)
//假设此处同步任务执行时间10秒

这时候我们就发现并不会在3秒后执行task()回调函数，而是会等待10秒时间执行完毕后再执行task()任务。我们来分析一下：

task()异步任务进入到 Event Table 并注册回调事件，开始计时
执行同步任务
经过3秒，task()进入事件队列（此时task并不能立刻执行）
经过10秒后，task()从事件队列中取出放到主线程执行

关于setTimeout要补充的是，即便主线程为空，setTimeout(fn,0)，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒。关于setInterval( fn , ms )来说并不是每隔ms就会执行一遍，而是经过ms后回调函数加入事件队列，所以setInterval未必准确。

举个例子：

console.log('1');

setTimeout(function() {
 console.log('2');
 process.nextTick(function() {
    console.log('3');
 })
 new Promise(function(resolve) {
    console.log('4');
    resolve();
 }).then(function() {
    console.log('5')
 })
})
process.nextTick(function() {
 console.log('6');
})
new Promise(function(resolve) {
 console.log('7');
 resolve();
}).then(function() {
 console.log('8')
})

setTimeout(function() {
 console.log('9');
 process.nextTick(function() {
 console.log('10');
 })
 new Promise(function(resolve) {
 console.log('11');
 resolve();
 }).then(function() {
 console.log('12')
 })
})

整体以script1作为宏任务进入主线程，输出1
遇到setTimeout，回调函数分到宏任务队列中，记为s1
遇到process.nextTick()，回调函数分到微任务队列中，记为p1
遇到promise，直接输出7，then回调函数放置到微任务队列，记为t1
遇到setTimeout，回调函数分配到宏任务队列，记为s2
结束第一轮事件循环

宏任务	微任务
s1	p1
s2	t1

由于微任务先于宏任务执行，此时输出 1 7 6 8，然后开启第二轮事件循环。从setTimeout1开始。

遇到同步任务，打印 2
遇到process，放到微任务队列，记为p2
遇到promise，打印同步任务输出 4
遇到then任务，放到微任务队列，记为t2

宏任务	微任务
s2	p2
	t2

第二轮宏任务结束，执行微任务p2，t2。输出 3 、5。然后开启第三轮事件循环，从setTimeout2开始。

遇到同步任务，打印 9
遇到process，放到微任务队列，记为 p3
遇到promise，打印同步任务输出 11
遇到then任务，放到微任务队列，记为 t3

宏任务	微任务
	p3
	t3

第三轮宏任务结束，执行微任务p3，t3，输出 10 、12。到此，三轮事件循环结束。输出顺序为：

1，7，6，8，2，4，3，5，9，11，10，12

解题方法：

同步：
微任务：[ ],
宏任务：[ ]

同步代码先执行，异步代码先不执行，添加到异步队列里面。执行到宏任务的时候添加到宏任务数组里面，执行到微任务的时候添加到微任务数组里面。微任务优先执行，执行完从数组中删除。当前微任务数组为空时才能执行下一个宏任务。

image.png

第一次循环：

同步：pr2,4
微任务：[then2 ],
宏任务：[ set1,set3]

第二次循环:

微任务：[then2 ], // 执行then2,并且把set2添加到宏任务数组
宏任务：[ set1,set3,set2],

第三次循环：

微任务：[ ], // 执行完then2，从微任务数组中移除
宏任务：[ set1,set3,set2], // 当前为任务数组为空，可执行下一个宏任务set1，
                          // 打印set1和pr1,并把then1添加到微任务数组

第四次循环：

微任务：[ then1], 
宏任务：[ set3,set2], // set1执行完并从宏任务数组中移除

此时微任务数组中有值，先执行微任务then1。

微任务：[ ], // then1执行完并从微任务数组中移除
宏任务：[ set3,set2],

此时微任务数组为空，执行宏任务set3之后执行set2。

打印顺序：

pr2,4,then2,set1,pr1,then1,set3,set2

最后一道题：

console.log('script start')

async function async1() {
  await async2()               // 大概等同于 new Promise(() => {
  console.log('async1 end')       // async2()
                               // }).then(() => {console.log('async1 end')})
  
}
async function async2() {
  console.log('async2 end') 
}
async1()

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')

答案：

script start 
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout

Event loop可视化工具

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/