Event Loop js 事件循环初理解

浏览器环境

理解 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), 即同步代码执行后， 执行一个宏任务，所以微任务； 一个宏任务，所以微任务。