事件循环机制是 JavaScript 单线程运行的核心机制，负责协调同步代码、异步代码（宏任务、微任务）的执行顺序。理解其流程和优化方法，对提升代码性能至关重要。
一、事件循环机制（宏任务 / 微任务）的具体流程
JavaScript 引擎的执行过程可分为调用栈（执行同步代码）、任务队列（存放异步任务）和事件循环（协调两者）三个部分。其中异步任务被分为宏任务（Macro Task） 和微任务（Micro Task） ，执行优先级不同。
1. 核心概念
宏任务：优先级较低的异步任务，包括：
setTimeout、setInterval（定时器）
DOM 事件（如 click、load）
AJAX 请求（网络操作）
I/O 操作（如文件读写）
script 标签整体代码（初始执行的脚本）
微任务：优先级较高的异步任务，包括：
Promise.then/catch/finally（Promise 的回调）
async/await（本质是 Promise 的语法糖）
queueMicrotask()（手动添加微任务）
process.nextTick（Node.js 特有，优先级高于其他微任务）
2. 执行流程（以浏览器为例）
1. 执行同步代码：从全局开始，将同步代码按顺序压入调用栈，执行完毕后弹出。
2. 处理异步任务：
-
遇到宏任务时，将其回调放入宏任务队列（等待触发，如定时器到时间后）。
-
遇到微任务时，将其回调放入微任务队列（立即等待执行）。
3. 同步代码执行完毕（调用栈为空），开始处理微任务队列：
按顺序执行所有微任务，直到微任务队列为空（期间新增的微任务会被加入队列并继续执行）。
4. 微任务队列清空后，执行一次UI 渲染（浏览器特有步骤）。
5. 从宏任务队列取第一个任务，压入调用栈执行其同步代码，重复步骤 2-4。
示例：
console.log('同步1'); // 同步代码，直接执行
setTimeout(() => {
console.log('宏任务1'); // 宏任务，放入宏任务队列
}, 0);
Promise.resolve().then(() => {
console.log('微任务1'); // 微任务，放入微任务队列
setTimeout(() => {
console.log('宏任务2'); // 微任务中新增的宏任务，放入宏任务队列
}, 0); }).then(() => {
console.log('微任务2'); // 微任务队列新增的任务，继续执行
}
});
console.log('同步2'); // 同步代码，直接执行
//执行结果：同步1 → 同步2 → 微任务1 → 微任务2 → 宏任务1 → 宏任务2
二、如何优化异步代码的执行效率
异步代码优化的核心是减少阻塞、避免不必要的等待、合理控制任务优先级，具体方法如下：
1. 优先使用微任务，减少延迟
微任务在同步代码后立即执行，无需等待 UI 渲染或宏任务队列，适合轻量、紧急的异步操作（如数据处理后的回调）。
用 Promise 替代 setTimeout 处理简单异步逻辑，避免宏任务的额外延迟（即使 setTimeout(fn, 0) 也会等待至少几毫秒）。
2. 批量处理微任务，避免阻塞
微任务队列会一次性执行完毕，若存在大量微任务（如循环中创建 Promise），可能阻塞主线程（导致 UI 卡顿）。
优化方式：将大量微任务拆分为多个批次，用 setTimeout 穿插宏任务，让浏览器有机会渲染 UI。
示例：
// 优化前：1000个微任务一次性执行，可能阻塞
for (let i = 0; i < 1000; i++) {
Promise.resolve().then(() => { /* 大量操作 */ });
}
// 优化后：每100个微任务后插入一个宏任务，释放主线程
const batchSize = 100;
let i = 0;
function process() {
const end = Math.min(i + batchSize, 1000);
for (; i < end; i++) {
/* 处理单个任务 */
}
if (i < 1000) {
setTimeout(process, 0); // 插入宏任务，让出主线程
}
}
process();
3. 控制宏任务的优先级和频率
-
避免滥用 setTimeout / setInterval：
-
setInterval 可能导致多个回调堆积（前一个未执行完，后一个又触发），可用 setTimeout 递归调用替代，确保每次执行完再调度下一次。
示例：
// 优化前：可能堆积
setInterval(() => { /* 耗时操作 */ }, 100);
// 优化后：确保执行完再调度
function loop() {
/* 耗时操作 */
setTimeout(loop, 100);
}
loop();
- 合理设置定时器延迟：避免不必要的高频触发（如动画可用 requestAnimationFrame 替代 setTimeout，与浏览器渲染频率同步）。
4. 利用异步并发控制
多个独立异步任务（如接口请求）应并行执行，而非串行等待，减少总耗时。
- 用 Promise.all() 并行处理，Promise.race() 处理 “最快响应” 场景。
示例：
// 串行（总耗时 = t1 + t2 + t3）
await fetch(url1);
await fetch(url2);
await fetch(url3);
// 并行（总耗时 = max(t1, t2, t3)）
await Promise.all([fetch(url1), fetch(url2), fetch(url3)]);
5. 避免嵌套回调（回调地狱）
嵌套回调会导致代码可读性差、错误处理复杂，可通过以下方式优化：
-
用 Promise 链式调用替代嵌套。
-
用 async/await 语法糖，将异步代码写得像同步代码，简化逻辑。
示例：
// 回调地狱
setTimeout(() => {
console.log('第一步');
setTimeout(() => {
console.log('第二步');
setTimeout(() => {
console.log('第三步');
}, 100);
}, 100);
}, 100);
// 优化后（async/await）
async function step() {
await new Promise(resolve => setTimeout(resolve, 100));
console.log('第一步');
await new Promise(resolve => setTimeout(resolve, 100));
console.log('第二步');
await new Promise(resolve => setTimeout(resolve, 100));
console.log('第三步');
}
step();
6. 合理使用 Web Worker 处理 heavy 任务
JavaScript 单线程中，耗时操作（如大数据计算）会阻塞事件循环，导致页面卡顿。
用 Web Worker 创建独立线程处理 heavy 任务，避免阻塞主线程，通过消息传递结果。
总结
事件循环机制的核心是先同步、再微任务、最后宏任务的执行顺序，优化异步代码需：
1. 优先用微任务处理轻量操作，减少延迟；
2. 拆分大量任务，避免阻塞主线程；
3. 并行处理独立异步任务，控制宏任务频率；
4. 用 async/await 简化异步逻辑，避免回调地狱；
5. 复杂计算交给 Web Worker，保证主线程流畅。
通过合理利用这些机制，可显著提升异步代码的执行效率和用户体验。
