深入理解js的事件循环机制（event Loop）

引言：

作为前端开发人员，JavaScript对于我们来说并不陌生，在日常开发中我们经常会遇到这样的情况，给定几行代码，需要知道其输出内容和顺序，我们可以直接在浏览器中运行，控制台查看运行结果，但如果是在面试求职中呢，我们显然不能打开电脑运行一下，所以理解JavaScript执行机制就显得尤为重要了。

1.关于javascript

javascript是一门单线程语言，简而言之呢，就是按照语句出现的顺序执行的，在最新的HTML5中提到了web-worker,但JavaScript是单线程这一核心仍未改变，所以一切javascript版本的“多线程”都是用单线程模拟出来的。

2.javascript事件循环

既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：

• 同步任务
• 异步任务

当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务。关于这部分有严格的文字定义，但本文的目的是用最小的学习成本彻底弄懂执行机制，所以我们用导图来说明：

导图要表单的内容用文字来表述的话：

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

3.javascript宏任务和微任务

宏任务和微任务

1，宏任务：当前调用栈中执行的代码为宏任务。（主代码块，定时器等等）。
2，微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。（promise,then,proness.nextTick等等）。
3.宏任务中的事件放在callback queue中，由事件触发线程维护。微任务的事件放在微任务队列中，由js引擎线程维护。

运行机制

• 在执行栈中执行一个宏任务。
• 执行过程中遇到微任务，将微任务添加到微任务队列中。
• 当前宏任务执行完毕，开始执行微任务队列中的任务。
• 当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
• 渲染完毕后，js线程接管。开启下一次事件循环，执行下一次宏任务（事件队列中取出）。

那怎么知道主线程执行栈为空啊？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

1，宏任务

#	浏览器	node
setTimeOut	√	√
setInterval	√	√
setImmediate	x	√
requestAnimationFrame	√	x

2，微任务

#	浏览器	node
process.nextTick	x	√
MutationObserver	√	x
Promise.then catch finally	√	√

宏任务和微任务之间的关系

案例

setTimeout(() => {
    //执行后 回调一个宏事件
    console.log('内层宏事件3')
}, 0)
console.log('外层宏事件1');

new Promise((resolve) => {
    console.log('外层宏事件2');
    resolve()
}).then(() => {
    console.log('微事件1');
}).then(()=>{
    console.log('微事件2')
})

可以先思考一下，在纸上写下执行顺序和打印结果.
…
我们来看下打印结果吧

外层宏事件1
外层宏事件2
微事件1
微事件2
内层宏事件3

1. 首先浏览器执行就是进入第一个宏任务（同步）进入主线程，遇到setTimeout，这是一个异步的宏任务，分发到Event Queue中。
2. 遇到console.log()自接打印，输出 “外层宏事件1”
3. 遇到Promise,new Promise 直接执行，输出，外层宏事件2
4. 执行 then，被分发到微任务Event Queue中
5. 第一轮宏任务执行结束，开始执行微任务，打印 “微事件1” “微事件2”
6. 第一轮微任务执行完毕，执行第二轮宏事件，打印setTimeout里面内容，“内层宏事件3”

这个例子看懂基本的js执行机制就理解了

//主线程直接执行
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')
   })
})
//微事件1
process.nextTick(function() {
   console.log('6');
})
//主线程直接执行
new Promise(function(resolve) {
   console.log('7');
   resolve();
}).then(function() {
   //微事件2
   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')
   })
})

1. 首先浏览器执行js进入第一个宏任务进入主线程，直接打印console.log('1')
2. 遇到 setTimeout分发到宏任务Event Queue中
3. 遇到process, nextTick丢到微任务Event Queue中
4. 遇到Promise,new Promise直接执行，输出console.log('7')
5. 执行then,被分发到微任务Event Queue中
6. 第一轮宏任务执行借宿，开始执行微任务，打印 6,8
7. 第一轮微任务执行完毕，开始执行第二轮宏事件，执行setTimeout
8. 先执行主线程宏任务，在执行微任务，打印2,4,3.5
9. 再执行第二个setTimeout,同理打印‘9,11,10,12’
10. 整段代码，共进行了三次事件循环，完整的输出为‘1，7，6，8，2，4，3，5，9，11，10，12’ 。

以上是在浏览器环境下执行的数据，只作为宏任务和微任务的分析，我在node环境下测试打印出来的顺序为：1，7，6，8，2，4，9，11，3，10，5，12。node环境执行结果和浏览器执行结果不一致的原因是：浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现。ibuv库流程大体分为6个阶段：timers，I/O callbacks，idle、prepare，poll，check，close callbacks，和浏览器的microtask，macrotask那一套有区别。

参考文档：
https://juejin.cn/post/6844903512845860872
https://www.cnblogs.com/ckAng/p/11133643.html
https://blog.csdn.net/namechenfl/article/details/99623700