浏览器环境
理解 Event Loop 之前我们需要弄清楚什么是 执行栈与 Task (任务）
执行栈
所有的 JS 代码在运行是都是在执行上下文中进行的。执行上下文是一个抽象的概念，JS 中有三种执行上下文：
- 全局执行上下文，默认的，在浏览器中是 window 对象
- 函数执行上下文， JS 函数每当调用时都会创建一个上下文
- Eval 执行上下文， eval 函数会产生自己的上下文
通常，我们代码中都不值一个上下文。
栈，是一种数据结构，具有先进后出的原则。JS 中的执行栈就具有这样的结构，当引擎第一次遇到 JS 代码时， 会产生一个全局执行上下文并压入执行栈，每当遇到一个函数调用，就会忘栈中压入一个新的上下文。引擎执行栈顶的函数，执行完毕，弹出当前执行上下文。
Task
我们把 JS 在浏览器中运行主要废物一下集中类型的任务：
- 同步任务（MainTask) ：同步任务是指 JS 按照正常顺序执行代码， 比如：函数调用，数值运算等，只要是执行后立即能够得到结果的就是同步任务。
- 宏任务（MacoTask）：setTimeout、setInterval、I/O、UI渲染
- 微任务（MicoTask）：Promise、Object.obsever、MutationObsever
- 用户交互事件（User Interaction Event）：点击事件 onclick、键盘事件onkeydown、鼠标事件 onmouserover等
Event Loop 执行顺序
- 首先执行同步任务
- 取出微任务（MicoTask）中任务执行，直到清空
- 取出宏任务（MacoTask）中的一个任务执行
- 取出当前宏任务（MacoTask）中的微任务（MicoTask）任务执行， 直到清空
为了方便记忆 可以把第一个同步任务理解为一个大的 宏任务（MacoTask), 即同步代码执行后， 执行一个宏任务，所以微任务； 一个宏任务，所以微任务。