页面卡死主因是同步循环占满主线程，解决关键是时间切片：按8–16ms阈值分片执行，配合requestAnimationFrame、queueMicrotask或requestIdleCallback调度。
复杂业务逻辑循环导致页面卡死，根本原因是同步执行占满主线程，浏览器没机会处理渲染、输入等任务。解决关键不是减少计算量，而是让出控制权——把大循环切成小片，在每片之间插入调度点，给浏览器“喘气”的机会。
识别哪些循环需要切片
以下几类循环大概率触发 long task（>50ms），应优先考虑切片：
- 遍历上万条数据做格式转换、校验或聚合
- 嵌套循环处理二维表格、树形结构或图关系
- 边遍历边读取 DOM（如 getBoundingClientRect、offsetHeight）
- 循环中调用第三方库方法且无法预估耗时
- 含复杂正则匹配、JSON 序列化/解析的循环体
按场景选对调度方式
不同业务需求对应不同调度机制，不能一概用 setTimeout(0)：
-
需视觉同步（如边算边更新进度条、滚动定位计算）：用
requestAnimationFrame。它确保下一片在下一帧开始前执行，天然对齐渲染周期。 -
纯计算 + 需快速响应用户操作（如表单实时校验）：用
queueMicrotask或setTimeout(fn, 0)。微任务清空更快，但注意避免堆积；宏任务更稳妥，适合批量处理。 -
后台型低优任务（如日志归档、缓存预热）：用
requestIdleCallback，它只在浏览器空闲时执行，不影响用户交互。
切片实现要点（不靠固定数量，靠时间控制）
按数组长度均分（如每批 100 条）容易翻车——数据项复杂度不一，有的单次执行 2ms，有的要 15ms。真正可靠的是基于时间切片：
- 每次执行前记录
performance.now() - 循环体内持续判断已用时间是否接近阈值（推荐 8–16ms，留足渲染余量）
- 超时即中断，保存当前索引，用调度函数推入下一片
- 避免在循环中直接递归调用自身，防止微任务爆栈或宏任务延迟失控
一个安全的 for 循环切片模板
适用于大多数主线程内需读 DOM 或维持闭包状态的业务场景：
（以处理 data 数组为例，每片最多运行 10ms）function sliceLoop(data, handler, done) {<br> let i = 0;<br> function next() {<br> const start = performance.now();<br> while (i handler(data[i], i);<br> i++;<br> }<br> if (i setTimeout(next, 0); // 或 queueMicrotask(next)<br> } else {<br> done?.();<br> }<br> }<br> next();<br>}
调用：sliceLoop(largeList, item => renderRow(item), () => console.log('完成'));
