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

宏任务和微任务

---

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

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