浏览器内的事件队列

浏览器内的事件队列是 JavaScript 异步编程的核心机制，它通过协调不同任务的执行顺序，确保代码在单线程环境下也能高效运行。以下是关于事件队列的详细解析：

1. 事件埋羡队列的基本概念

单线程与异步：JavaScript 是单线程语言，但通过事件队列（Event Queue）实现异步操作。异步任务（如 setTimeout、网络请求）由浏览器其他线程处理，完成后将回调函数推入队列，等待主线程执行。
任务分类：
宏任务（Macrotask）：包括 setTimeout、setInterval、I/O 操作、UI 渲染等。
微任务（Microtask）：包括 Promise.then、MutationObserver、process.nextTick（Node.js）等。

2. 事件循环（Event Loop）机制

事件循环是协调任务执行的流程，具体步骤如下：

执行同步代码：主线程按顺序执行同步任务，构建调用栈（Call Stack）。
处理微任务队列：
每次调用栈清空后，事件循环优先检查微任务队列。
执行所有微任务，直到队列为空。
处理宏任务队弯念拍列：
从宏任务队列中取出第一个任务执行。
执行过程中可能产生新的微任务或宏任务，分别加入对应队列。
渲染更新（浏览器环境）：在宏任务执行后、下一个宏任务前，浏览器可能进行页面渲染。
重复循环：持续检查并执行队列中的任务。

3. 关键示例分析示例 1：setTimeout 与同步代码setTimeout(() => console.log('---1---'), 0);console.time("test");for (let i = 0; i < 1000000; i++) {}console.timeEnd("test");console.log('---2---');

输出顺序：

test: 5.489ms---2------1---

原因：

setTimeout 的回调被推入宏任务队列，而同步代码（for 循环和 console.log）直接执行。
只有主线程空闲后，才会从宏任务队列中取出 setTimeout 的回调执行。

示例 2：微任务与宏任务的混合setTimeout(() => console.log('---1---'), 0);setTimeout(() => { Promise.resolve().then(() => console.log('---2---')); console.log('---3---');}, 0);new Promise(resolve => { console.time("Promise"); for (let i = 0; i < 1000000; i++) { if (i === 999999) resolve(); } console.timeEnd("Promise");}).then(() => console.log('---4---'));console.log('---5---');

输出顺序：

Promise: 5.151ms---5------4------1------3------2---

执行流程：

同步代码：
两个 setTimeout 的回调进入宏任务队列。
Promise 的同步部分执行，输出计时结果，resolve() 将 .then 回调推入微任务队列。
console.log('---5---') 直接执行。
微任务执行：
主线程空闲后，执行微任务队列中的 console.log('---4---')。
宏任务执行：
取出第一个 setTimeout 回调，输出 ---1---。
第二个 setTimeout 回调执行，先输出 ---3---，再将 Promise.then 回调推入微任务队列。
主线程再次处理微任务队列，输出 ---2---。

4. 任务队列的优先级

微任务优先于宏任务：每次主线高闷程空闲时，会先清空微任务队列，再执行宏任务队列中的下一个任务。
嵌套微任务：若微任务执行中产生新的微任务，会继续执行，直到队列为空（可能导致宏任务延迟）。

5. 实际应用与注意事项

避免阻塞：长时间运行的同步代码（如密集计算）会延迟任务队列的执行，导致页面卡顿。
合理使用异步：将非关键逻辑（如日志、分析）放入 setTimeout，避免阻塞渲染。
微任务滥用风险：在微任务中递归添加微任务可能导致无限循环，阻塞主线程。

总结

浏览器的事件队列通过 宏任务 和 微任务 的分层设计，确保了异步任务的有序执行。理解事件循环的机制有助于优化代码性能，避免因任务调度导致的意外行为。核心原则是：同步代码 → 微任务 → 宏任务 → 渲染，循环往复直至任务队列清空。

您可能感兴趣问答

Collapsible

热门标签

热点问答