页面卡死是因为javascript主线程与渲染线程互斥，长同步任务超16ms会错过帧渲染，持续数百毫秒将导致完全冻结。
因为浏览器的 JavaScript 主线程和渲染线程是互斥的，一旦同步计算占用主线程太久，渲染任务就无法及时执行，用户就会感知到页面卡死或无响应。
主线程被独占，渲染被迫等待
浏览器在单线程环境下运行 JS，同时还要处理样式计算、布局（回流）、绘制（重绘）和合成。这些渲染步骤必须在主线程上完成。当一个长同步任务（比如循环 10 万次、深度遍历大对象、复杂正则匹配）持续运行超过 16ms，就会错过一帧的渲染时机；若持续几百毫秒甚至几秒，页面就完全“冻结”——按钮点不动、滚动停住、动画中断。
- 典型例子：
for (let i = 0; i 直接阻塞主线程 - 同步 AJAX（
async: false）也会让 GUI 线程挂起，直到请求返回才继续渲染 - 大型 JSON 解析、未分片的数组 map/filter、递归过深的函数调用都可能触发此问题
帧率要求与实际可用时间
60Hz 屏幕要求每帧 ≤16.67ms 完成所有工作。但浏览器内核本身需占用部分时间（如事件分发、垃圾回收），留给 JS 执行的安全窗口通常只有 8–10ms。超出这个阈值，就容易掉帧；连续多帧超时，用户明显感到卡顿。
- Chrome DevTools 的 Performance 面板可直观看到长任务（Long Task）标记为红色条形
- 使用
performance.now()手动打点，能定位具体哪段代码耗时异常 -
console.time()/console.timeEnd()是快速验证的轻量方式
不改逻辑，也能缓解阻塞
无需重写算法，通过任务拆分把大工作切碎，在空闲时段或下一帧中渐进执行，就能释放主线程。
- 用
requestIdleCallback在浏览器空闲时执行低优先级任务（适合数据预处理、日志上报） - 用
requestAnimationFrame把计算绑定到渲染周期，确保每帧只做一点（适合动画联动计算） - 简单场景可用
setTimeout(fn, 0)或Promise.resolve().then(fn)让出当前宏任务，实现微任务/宏任务级分片
真正隔离计算：Web Worker
当计算量极大（如图像处理、加密解密、大规模数据聚合），分片仍不够用时，必须离开主线程。
- Web Worker 在独立线程运行 JS，完全不干扰 UI 渲染
- 主线程通过
postMessage发送数据，Worker 处理完再传回结果 - 注意：Worker 不能访问 DOM、
window、document等主线程专属 API
