不积跬步之Event Loop 以及宏任务 微任务

event loop

讲到event loop事件循环，网上最好的资源应该就是Philip Roberts的演讲《Help, I'm stuck in an event-loop》）
以及 深入事件环(In The Loop)Jake Archibald@JSconf 2018 (我放的是B站的连接，up主已经做好了翻译) 阮一峰写的JavaScript 运行机制详解：再谈Event Loop 同样也是基于 上面第一篇文章。看完以后大受启发，学习这些资源还是应该去源头上看。

我希望这篇文章可以回答以下问题：

1. event loop 它的执行顺序是什么？
2. 什么是宏任务和微任务以及他们的区别？
3. 实现宏任务和微任务的方式都有哪些？

我们开始吧：

1.什么是事件循环 event loop 呢？

它的组成部分包括如下：

• heap 堆内存 用来存放引用类型的数据
• stack 执行栈
• WebAPIS 浏览器的api，它们决定了什么时候把宏任务放到任务队列里面
• callbackQueue 回调队列 也叫 宏任务队列
• MicroTaskQueue 微任务的任务队列
• event loop 负责手机用户事件和非用户事件，对任务进行排队以便在核实的时候执行回调。然后它执行所有处于等待中的 JavaScript 任务（宏任务），然后是微任务，然后在开始下一次循环之前执行一些必要的渲染和绘制操作。

实际上上图是在2014年的时候出的，距离我们现在微任务的场景已经略微过时。我手绘了如下的图片来说明我们现在完整的：

WechatIMG67.jpeg

它的执行顺序如下：

• 一开始整个脚本作为一个宏任务执行
• 执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
• 当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
• 执行浏览器UI线程的渲染工作
• 检查是否有Web Worker任务，有则执行
• 执行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空。

微任务会在下一轮宏任务执行之前先执行。
微任务会一直执行，直到微任务队列清空为止，这里也有可能 无限执行下去，有这种风险。

2.什么是宏任务和微任务以及他们的区别？

宏任务：

一个宏任务就是由执行诸如从头执行一段程序、执行一个事件回调或一个interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在 任务队列（task queue）上被调度。

在以下时机，任务会被添加到任务队列：

• 一段新程序或子程序被直接执行时（比如从一个控制台，或在一个