共计 2157 个字符，预计需要花费 6 分钟才能阅读完成。
Event Loop 基础：JavaScript 的异步心脏
JavaScript 的单线程模型意味着它只有一个主线程处理任务，而异步机制通过 Event Loop 实现非阻塞执行。理解以下关键概念：
- 调用栈(Call Stack)：同步代码执行的地方，遵循 LIFO（后进先出）原则
- 任务队列(Task Queue)：分为宏任务队列和微任务队列两种
- 事件循环机制：持续检查调用栈是否为空，然后按特定规则从队列中取任务执行
(示意图：事件循环工作流程)
宏任务 vs 微任务：执行优先级之争
- 宏任务(Macrotasks)：
- 包含：script 整体代码、setTimeout/setInterval、I/ O 操作、UI 渲染
-
特点：每次 Event Loop 只执行一个宏任务
-
微任务(Microtasks)：
- 包含：Promise.then/catch/finally、MutationObserver、process.nextTick(Node.js)
- 特点：每个宏任务执行完后会清空整个微任务队列
异步 API 执行时机对比实验
console.log('脚本开始'); // 同步任务
setTimeout(() => {console.log('setTimeout 回调'); // 宏任务
}, 0);
Promise.resolve().then(() => {console.log('Promise 微任务'); // 微任务
});
requestAnimationFrame(() => {console.log('rAF 回调'); // 特殊宏任务
});
console.log('脚本结束'); // 同步任务
/*
典型输出顺序：1. 脚本开始
2. 脚本结束
3. Promise 微任务
4. rAF 回调
5. setTimeout 回调
*/常见异步问题诊断
案例 1：动画卡顿
// 错误示范：同步计算阻塞渲染
function heavyCalc() {
let sum = 0;
for(let i=0; i<1000000000; i++) sum += i;
return sum;
}
requestAnimationFrame(() => {heavyCalc(); // 会阻塞后续帧渲染
updateAnimation();});案例 2：内存泄漏
// 未清理的定时器
class Component {constructor() {this.timer = setInterval(this.update.bind(this), 1000);
}
// 忘记在 unmount 时 clearInterval
}生产环境最佳实践
- 长任务拆分 ：使用
setTimeout或requestIdleCallback分解耗时操作 - 优先使用微任务：Promise 比 setTimeout 更适合紧急但轻量的任务
- 帧率优化：动画相关操作放入 requestAnimationFrame
- 错误处理：Promise 链必须包含 catch 处理
- 资源清理：组件卸载时取消所有异步操作
// 优化后的动画示例
function frameOptimized() {
const chunkSize = 1000000;
let processed = 0;
function processChunk() {for(let i=0; i<chunkSize; i++) {// 分块处理}
processed += chunkSize;
if(processed < total) {requestAnimationFrame(processChunk); // 下一帧继续
}
}
requestAnimationFrame(processChunk);
}进阶思考：异步调度系统设计
设计一个支持优先级的任务调度系统需要考虑：
- 任务分类（紧急 / 普通 / 低优先级）
- 饥饿问题预防（避免低优先级任务长期得不到执行）
- 任务取消机制
- 执行时长监控
- 与浏览器渲染周期的协调
class Scheduler {constructor() {this.highPriorityQueue = []; // 微任务队列
this.lowPriorityQueue = []; // 宏任务队列}
addTask(task, isHighPriority = false) {
const queue = isHighPriority ?
this.highPriorityQueue :
this.lowPriorityQueue;
queue.push(task);
this.schedule();}
schedule() {if(this.highPriorityQueue.length) {Promise.resolve().then(() => {const task = this.highPriorityQueue.shift();
task();});
} else if(this.lowPriorityQueue.length) {setTimeout(() => {const task = this.lowPriorityQueue.shift();
task();}, 0);
}
}
}总结与延伸阅读
理解异步调用时机是优化前端性能的关键。推荐进一步研究：
– Chrome DevTools 的 Performance 面板分析任务时序
– Web Worker 处理 CPU 密集型任务
– 新的 scheduler API（如 postTask）
思考题：在你的项目中，哪些场景最能体现合理调度异步任务的价值？如何量化优化效果？
正文完
