前端密集计算应分片执行并交还主线程控制权，单次≤50ms以保60fps；可用setTimeout切片、requestIdleCallback错峰、Web Worker卸载纯计算，并配合渐进反馈与中断机制。
前端密集型计算不一定要“躲着主线程”，而是要“节奏感地交还控制权”。只要单次执行不超过 50ms，浏览器就能维持 60fps 渲染和及时响应用户操作。关键在于把一个大循环或大解析过程，拆成小段、分批执行，并在每段之间主动让出主线程。
用 setTimeout 实现任务切片
这是最轻量、兼容性最好的方式，适合文本处理、数组遍历、简单转换等场景：
- 把原始数据按固定大小（如 100–500 项）分块，每次只处理一块
- 每块处理完后调用 setTimeout(fn, 0) 或 Promise.resolve().then(fn)，把下一块推入宏任务队列
- 避免在 for 循环中直接跑到底；改用递归式分片函数，中间插入让渡点
- 示例：处理 10 万条日志时，每次解析 200 行，处理完立即 setTimeout 下一批，用户滚动、点击完全不受影响
对图像解码等隐式长任务错峰调度
像 image.decode() 这类 API 看似简单，实则可能卡主线程上百毫秒。不能跳过，但可以推迟或分散执行：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 设置好
img.src后，不要立刻调用decode() - 改用 requestIdleCallback 在浏览器空闲时段触发解码，或用 setTimeout(decode, 0) 推迟到下一帧
- 批量处理多张图时，每次只 decode 1–2 张，其余暂存队列，等前一批完成再调度下一批
- 配合 loading 状态提示，让用户感知“正在处理”，而非页面冻结
将纯计算逻辑移入 Web Worker
当任务不依赖 DOM、且计算量极大（如 Excel 解析、加密签名、图像滤镜、AI 推理前处理），就该交给 Worker：
立即学习“前端免费学习笔记（深入）”；
- 主线程读取文件为 ArrayBuffer，用
postMessage(buffer, [buffer])零拷贝传入 Worker - Worker 内部仍需分片：不能一口气跑完全部计算，要用 setTimeout(0) 或 Promise.then 让渡控制权，防止 Worker 自身无响应
- 结果分批次返回（例如每处理 1000 行发一次消息），主线程接收后增量更新 UI 或缓存
- 支持外部中断：监听 message 事件，通过
shouldCancel标志位实现暂停/取消，避免用户关闭页面后还在后台空转
配合渐进式反馈与可控中断
用户不需要等全部完成才看到进展。真正的体验优化，是把“等待”变成“可见的进行中”：
- 每完成一个分片，就更新进度条、渲染已处理的数据行、或写入临时缓存
- 提供“暂停”“继续”“取消”按钮，主线程发送指令，Worker 检查中断标志并安全退出
- 可动态调整分片大小：若检测到上一轮耗时接近 50ms，下次自动减小 chunkSize；若远低于，则适当加大，提升吞吐效率
- 避免“假完成”：最后收尾阶段仍需确保所有分片真正结束，再触发最终 success 回调
