页面冻结主因是同步循环霸占主线程，解决关键是分片让出控制权；需对万级数据遍历、深度递归、批量DOM操作等长任务按时间（10–30ms）切块，配合requestAnimationFrame、setTimeout或requestIdleCallback调度。
复杂循环计算导致页面冻结，本质是同步执行霸占了主线程，浏览器没机会渲染和响应用户操作。解决思路不是让它变快，而是主动“让出控制权”，把大任务切成小块，在每块之间交还线程。
识别哪些循环需要分片
以下情况大概率触发长任务（>50ms），应优先考虑分片：
- 遍历超过 1 万条数据并做格式化、校验或映射
- 递归处理深度嵌套对象或树形结构（如无限分级菜单）
- 批量生成 DOM 节点（尤其含 getBoundingClientRect、offsetTop 等强制布局读取）
- 在 for 循环中频繁调用高开销函数（如正则匹配、JSON.stringify、深克隆）
按场景选对分片调度方式
不同调度机制适合不同目标，别混用：
-
需视觉同步（如边算边更新进度条、滚动时实时计算可视区）：用
requestAnimationFrame。它天然对齐浏览器刷新节奏，每帧最多执行一块，保证动画不掉帧。 -
纯后台计算，不依赖渲染时机：用
setTimeout(fn, 0)或queueMicrotask(fn)。前者进宏任务队列，更稳妥；后者进微任务队列，适合紧接当前逻辑后执行（如状态合并）。 -
有空闲时间才执行（如非关键后台分析）：用
requestIdleCallback，但注意兼容性与超时兜底（timeout参数必设）。
切分不是按数量，而是按时间
固定每次处理 100 条不科学——单次运算复杂度不同，耗时差异大。正确做法是实时监控执行时间：
- 每块目标控制在 10–30ms 内（避开 16ms 渲染帧上限，留出余量）
- 用
performance.now()在循环内计时，达到阈值立即中断 - 避免 while(true) + setTimeout 递归无退出条件，必须检查索引边界或完成标志
一个实用的分片函数模板
适用于大多数数组批量处理场景：
function processInChunks(data, handler, done, chunkMs = 16) {
let i = 0;
function next() {
const start = performance.now();
while (i handler(data[i]);
i++;
}
if (i setTimeout(next, 0); // 或 requestAnimationFrame(next)
} else {
done?.();
}
}
next();
}
调用时只需传入数据、单条处理逻辑和完成回调，无需手动管理索引或定时器嵌套。
