浏览器中的js事件循环（Event loop）

原文地址: https://qianduan.shop/blogs/detail/16

欢迎加入：优快云 React社区

本文将简述浏览器中的js事件循环机制，帮助我们理解浏览器环境js代码是如何运行的。

Javascript的一大特点是单线程，也就意味着同一时间他只能做一件事。事件循环（Event Loop）是为了协调事件，用户交互，UI渲染，网络处理等行为，防止线程阻塞而诞生的。

浏览器事件循环

1.宏任务（Macro Task）和微任务（Micro Task）

浏览器中js事件循环的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。宏任务队列可以有多个，微任务队列只有一个。

常见的宏任务：定时器（setTimeout，setInterval）、script（整体代码）、 I/O 操作、UI渲染等。

常见的微任务: Promise.then(Promise的回调方法)、MutationObserver(html5新特性) 等。

2.事件循环过程解析

一个完整的事件循环过程可以概括为以下阶段：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NmXzcMT0-1637111445594)(/static/images/event_loop.png)]

① 刚开始执行栈空,我们可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。微任务队列为空，宏任务队列里有且只有一个 script 脚本（整体代码）。

② 全局上下文（script 标签）被推入执行栈，同步代码执行。在执行的过程中，会判断