一文详解浏览器的事件循环（Event Loop）

在 JavaScript 的世界里，事件循环机制（Event Loop） 是支撑异步编程模型的核心。理解这一机制不仅能帮助我们更好地掌控异步代码的执行顺序，还能在日常开发中写出性能更优、响应更快的前端应用。

本文将从浏览器架构讲起，逐步解析事件循环的工作原理、宏任务与微任务的区别，并结合图解加深理解。

一、浏览器是多进程架构

现代浏览器（如 Chrome）采用多进程架构。每打开一个新的 Tab 页面，浏览器就会为它启动一个独立的进程，这样可以避免一个页面卡死导致整个浏览器崩溃的情况。

每个页面进程内部又包含多个线程，常见的有：

• GUI 渲染线程：负责页面布局、样式计算与绘制。

• JS 引擎线程：负责 JavaScript 的执行（例如 V8 引擎）。

• 事件触发线程：管理事件队列与回调调度。

• 定时器线程：处理 setTimeout、setInterval 等。

• HTTP 请求线程：异步处理网络请求。

二、JavaScript 是单线程语言

JavaScript 是一种单线程语言，即同一时刻只能做一件事情。这意味着 JS 执行过程中无法同时处理其他任务，容易出现阻塞。

为了让 JS 仍能处理异步任务（如网络请求、定时器等），浏览器引入了 事件循环机制（Event Loop） 来调度这些异步任务的执行。

三、什么是事件循环（Event Loop）

事件循环的核心任务就是：

协调调用栈（Call Stack）与任务队列（Task Queue）的工作。

基本流程如下：

1. 浏览器执行同步代码，压入调用栈。

2. 当异步任务（如 setTimeout）触发时，由浏览器其他线程处理。

3. 异步任务完成后，将对应回调加入任务队列（Macro Task 或 Micro Task）。

4. 当调用栈清空后，事件循环从任务队列中取出任务执行。

5. 执行完当前任务后，再检查是否有微任务，并优先执行所有微任务，最后再进入下一轮事件循环。

🔁 这就是一个事件循环的完整周期。

 注意：渲染 UI 更新也是在宏任务之间进行的。

四、宏任务与微任务的区别

宏任务（Macro Task）

宏任务是指一类较大的任务单元，代表每轮事件循环要处理的主要内容。

常见的宏任务有：

• setTimeout

• setInterval

• setImmediate

• MessageChannel

• I/O 操作

• 整个 script 脚本执行

微任务（Micro Task）

微任务是在当前宏任务执行结束后立即执行的小任务，优先级高于下一个宏任务。

常见的微任务有：

• Promise.then

• MutationObserver

• queueMicrotask

区别总结：

对比	宏任务（Macro Task）	微任务（Micro Task）
触发时机	每轮事件循环	每个宏任务之后、渲染之前
优先级	低	高
应用场景	异步控制、计时器等	DOM变化监听、Promise 回调等
队列	任务队列（Task Queue）	微任务队列（Microtask Queue）

五、浏览器内核与线程模块一览

浏览器内核
├── JS 引擎线程（如 V8）     👈 执行 JavaScript 脚本
├── 渲染引擎线程（如 Blink） 👈 负责 HTML/CSS 的解析与绘制
├── 网络线程                   👈 管理 HTTP 请求
├── 定时器线程                 👈 管理 setTimeout 等计时器
├── 事件触发线程               👈 控制事件队列调度

通过这些线程的协同工作，事件循环机制可以高效地调度任务执行、更新 UI，以及响应用户操作。

七、总结

事件循环机制是浏览器中最核心的一环，也是 JavaScript 能够实现异步编程、性能优化、任务调度的根本。

• JavaScript 本身是单线程语言；

• 浏览器通过多线程配合事件循环实现异步处理；

• 宏任务控制整体流程，微任务则是高优先级的细节处理；

• 微任务会在每个宏任务后立即执行，页面渲染会等待微任务执行完成后才进行。

欢迎来Caa · 语雀，每日更新前端知识ing，一起学习共同进步！