前端卡顿本质是主线程被长时间占用，可通过rAF切片（拆分任务、每帧执行少量）、任务队列+配额控制（限次限时）、Web Worker移出主线程、以及渐进式反馈（骨架屏、缓存、取消机制）优化体验。
前端繁重计算导致界面卡顿，本质是主线程被长时间占用，用户操作无法及时响应。切片策略不是让计算变快，而是把大任务“拆开、错峰、交还控制权”，让用户感觉页面始终可交互。
用 requestAnimationFrame 分帧执行
浏览器每 16.6ms 渲染一帧，只要单次计算不超过这个时长，就不会掉帧。把一个需 200ms 的数组排序或数据转换任务，拆成每次处理 10~20 条，插入到连续的 rAF 回调中：
- 每次只做一小块，立刻返回控制权给浏览器处理渲染和事件
- 用递归方式在每个 rAF 结束后判断是否还有剩余任务，有则继续调度
- 适合数据遍历、格式转换、批量校验等线性可分任务
结合队列与节流节奏控制
单纯靠 rAF 容易在高负载设备上仍堆积任务。更稳妥的做法是引入“任务队列 + 执行配额”：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 将待处理项全部入队，每次 rAF 中只取前 N 项（如 8–15 条）执行
- 执行完检查当前帧耗时（performance.now()），若已超 10ms，就暂停，下帧再继续
- 可配合 loading 状态或进度条提示用户“正在处理”，避免误判无响应
把计算移出主线程（Web Workers）
真正密集型计算（如图像处理、加密解密、复杂算法）应彻底剥离主线程：
立即学习“前端免费学习笔记（深入）”；
- 用 Web Worker 在后台线程运行，主线程全程不阻塞
- Worker 内部也可自行切片：比如处理 10MB 图像像素，按行或区块分批计算并 postMessage 回传结果
- 注意跨线程通信成本，避免高频小消息；大数组优先用 Transferable（如 ArrayBuffer）零拷贝传递
提前降级与渐进式反馈
切片只是手段，体验优化的关键在于“让用户知道你在努力”：
- 首屏先渲染骨架或默认值，异步计算结果到达后再替换真实内容
- 对中间态做轻量缓存（如已处理前 500 条的结果），避免重复劳动
- 允许用户中断：提供“取消”按钮，通过 AbortController 或标志位终止后续切片执行
