这是 JavaScript 单线程特性的典型问题。
根本原因
JavaScript 是单线程的
结果：JS 长时间运行 → 主线程被占用 → 无法渲染UI/响应交互 → 浏览器假死
具体场景
| 场景 | 为什么会卡死 | 典型例子 |
|---|---|---|
| 大数组遍历 | 同步循环处理百万级数据 | for 循环处理 100万+ 条目 |
| 复杂计算 | CPU 密集型运算 | 图像处理、密码破解、大数据分析 |
| 递归过深 | 调用栈溢出或长时间递归 | 树形结构遍历、阶乘计算 |
| 同步 AJAX | 已废弃的 open(false) 阻塞 |
旧代码中的同步请求 |
| DOM 操作过多 | 频繁重绘重排 | 循环中反复修改样式 |
解决方案
方案一：异步分解任务（推荐）
使用
setTimeout/requestIdleCallback 让出主线程// ❌ 会卡死浏览器（100万次同步执行）
for (let i = 0; i < 1000000; i++) {heavyCalculation(i);
}// ✅ 异步切片，浏览器保持响应
function processChunk(start, end) {for (let i = start; i < end; i++) {heavyCalculation(i);}
}async function processLargeArray() {const chunkSize = 1000; // 每批处理1000个for (let i = 0; i < 1000000; i += chunkSize) {await new Promise(resolve => setTimeout(resolve, 0)); // 让出主线程processChunk(i, Math.min(i + chunkSize, 1000000));}
}