方法1：深入理解事件循环与执行上下文
1.1 事件循环的基本阶段
在浏览器的单线程模型中，事件循环是调度任务的核心机制。理解宏任务队列、微任务队列以及渲染阶段之间的关系，是实现性能优化的前提。通过把耗时操作拆分成较小的任务，可以避免一次性占用主线程过久时间，提升页面交互的流畅度。
关键点在于：宏任务决定了渲染节奏，微任务决定了任务的顺序执行，二者的组合决定了后续的 UI 响应时间。掌握它们的优先级，有助于避免“卡顿”的现象。
1.2 宏任务与微任务的区别
宏任务包括 setTimeout、setInterval、I/O 事件等，而微任务包括 Promise.then、MutationObserver、process.nextTick（Node 环境）等。微任务队列通常在当前事件循环的末尾执行，在下一轮渲染前完成。因此，将可延迟的工作移入微任务，可以减少下次渲染前的阻塞。
示例中，使用 Promise.resolve().then() 将回调放入微任务队列，确保在当前事件完成后立即执行，从而避免额外的浏览器重排。
// 微任务的典型用法
console.log('1');
Promise.resolve().then(() => {console.log('2');
});
console.log('3');
// 输出顺序： 1、3、2
1.3 执行上下文的栈与队列关系
每当一个任务启动，都会创建一个新的执行上下文并压入执行栈。执行栈的深度和任务的长度直接影响响应时间。设计上应尽量避免深层嵌套和长链式调用，以降低栈的消耗。
常见优化做法包括：将复杂逻辑拆分为独立的小函数，确保每次调用的执行上下文尽可能简短，避免在热路径中产生额外的上下文切换。
方法2：将大任务分解成小任务，减少单次宏任务耗时
2.1 拆分大任务的策略
把超时操作、循环遍历、复杂计算分割成多次执行，每次只处理一定数量的工作项，留出时间给渲染与输入事件处理，从而防止长时间的主线程占用。
实现要点是设定一个“批量大小”和一个“时间片段”，用 setTimeout 或 requestIdleCallback 将下一批任务推入队列，确保界面保持可响应。
2.2 使用时间分片的示例
下面的示例演示如何把一个需要处理的数组分成批次执行，避免在单次执行中阻塞 UI。
核心思想：批次执行、分段完成、保持流畅
const items = new Array(10000).fill(0).map((_,i) => i);
const batchSize = 100;
let index = 0;function processBatch() {const end = Math.min(index + batchSize, items.length);for (let i = index; i < end; i++) {// 伪计算items[i] = Math.sqrt(items[i]);}index = end;if (index < items.length) {// 使用时间片执行下一批setTimeout(processBatch, 0);} else {console.log('全部处理完成');}
}
processBatch();
2.3 将空闲时段用于后台工作
可以借助 requestIdleCallback（在空闲时段执行）来调度非紧急任务，避免在高优先级任务阻塞时执行，提高总体感知性能。
function doWork(deadline) {while (deadline.timeRemaining() > 0 && tasks.length) {// 处理一部分任务}if (tasks.length) {requestIdleCallback(doWork);}
}
requestIdleCallback(doWork);
方法3：巧用微任务优化时序，避免不必要的重排
3.1 微任务放置的最佳时机
将可以立即完成的逻辑放入微任务队列，可以把后续操作尽早安排完毕，但要避免在微任务中产生新的更长链的宏任务，以防止“任务悬挂”导致帧率下降。
在渲染周期前完成关键状态更新，能减少多余的重排和重绘，提高帧稳定性。
3.2 避免在微任务中产生额外的宏任务
如果在微任务中频繁地调用 setTimeout、setInterval 等宏任务，将会拉长下一帧的等待时间。应优先完成已经排队的微任务，必要时再把剩余工作拆分为微任务或在下一轮事件循环中执行。
下面的代码展示了避免在微任务内触发新的宏任务的思路：
// 不在微任务内持续触发宏任务
Promise.resolve().then(() => {// 做一些工作if (需要继续处理) {// 尽量不要在这里直接触发宏任务// 使用下一轮事件循环来继续处理setTimeout(() => {// 下一批微任务或宏任务}, 0);}
});
方法4：渲染与动画的节奏控制
4.1 使用 requestAnimationFrame 控制 UI 更新
requestAnimationFrame (rAF) 与浏览器的渲染周期绑定，能显著降低无效重绘与布局计算的次数，提升动画流畅度和页面响应性。
将需要渲染的计算放在 rAF 回调中执行，确保在浏览器准备好下一帧时完成渲染相关的工作。
4.2 将 UI 计算与渲染分离
将高耗时的计算任务放在后台（如 Web Worker）或分离的逻辑模块中，避免阻塞渲染路径，从而让动画和交互保持平滑。
示例：在渲染帧前只进行必要的布局与绘制计算，其余的计算留到下一帧或异步处理。
方法5：利用多线程与浏览器能力
5.1 Web Worker 与 OffscreenCanvas
Web Worker 提供了真正的并行执行环境，不干扰主线程的渲染和交互。OffscreenCanvas 结合 Web Worker，可以在后台完成绘制任务，进一步提升 UI 响应。
通过 OffscreenCanvas，将绘制密集的操作交给工作线程执行，主线程只负责状态管理和协作渲染。
5.2 何时使用多线程更合适
对于计算密集型任务、图像处理、数据转换等场景，多线程能显著减少主线程拥堵，但需要注意数据传输成本和并发带来的复杂性。
// 浏览器端的简单 Worker 示例
// worker.js
self.onmessage = function(e) {const data = e.data;// 计算密集任务const result = heavyComputation(data);self.postMessage(result);
}
方法6：监控、分析、调优的实践
6.1 使用 Performance API 监控关键指标
Performance API 提供了时间线、资源加载、长任务等数据，能帮助定位卡顿点，从而进行针对性优化。
通过记录开始与结束时间，可以精准分析任务耗时与渲染时间分布。
6.2 关注 Long Tasks 与 RAIL 模型
长任务（>50ms）会造成明显的卡顿，RAIL（响应、动画、交互、测试）模型有助于从四个维度评估性能。对长任务进行分解、优先级排序、渲染时间对齐，能提升总体体验。
6.3 常用调优工具与案例
结合 Chrome DevTools 的 Performance、Lighthouse、Audits 等工具，可以直观地看到钱后端任务的分布与改动前后的对比。
以下是一个性能分析的简单步骤：首先记录性能，再逐步应用上述六个实战方法，最后用工具对比帧率、长任务、CLS 等指标的变化。
// 简单的性能日志示例
performance.mark('start');
/* 关键渲染或计算逻辑 */
performance.mark('end');
performance.measure('myTask', 'start', 'end');
console.log(performance.getEntriesByType('measure'));
