长耗时调用栈导致浏览器卡死，本质是JS单线程持续占用主线程阻塞渲染与事件；识别现象包括页面完全冻结、Chrome警告脚本超时、Performance面板显示长时间Scripting。
长耗时调用栈导致浏览器卡死、页面无响应，本质是 JavaScript 在单线程主线程中持续占用调用堆栈，阻塞了渲染、事件响应和定时器执行。这不是网络请求慢的问题，而是代码逻辑本身“堵死了”浏览器。
识别是否为调用栈阻塞
当出现以下现象，大概率是调用栈过长而非网络或后端问题：
- 页面完全冻结：无法点击按钮、滚动、输入文字，甚至右键菜单都打不开
- Chrome 弹出“脚本运行时间过长”警告（通常超 30 秒）
- 其他标签页正常，仅当前页面卡住
- DevTools 的 Performance 面板显示主线程长时间处于 “Scripting” 状态，无空闲片段
避免同步重计算与长循环
JavaScript 中看似简单的操作，在数据量大时会变成性能炸弹：
- 避免在 for 循环中反复读取 DOM 属性（如 offsetTop、clientWidth），每次读取都可能触发强制重排
- 不用 for...in 遍历大型对象；改用 Object.keys(obj).forEach 或 for(let i = 0; i （提前缓存 length）
- 图像处理、加密解密、大数据排序等 CPU 密集型任务，必须拆分或移交 Web Worker
用异步切片释放主线程
把一个大任务切成小块，每执行一块后让出控制权，保证浏览器能响应用户操作：
- 用 setTimeout(fn, 0) 或 queueMicrotask(fn) 实现微任务/宏任务切片
- 例如处理 10 万条数据，每次只处理 1000 条，然后调度下一批
- 配合 requestIdleCallback（兼容性需注意），在浏览器空闲时执行非紧急任务
启用 Web Worker 处理纯计算
将不涉及 DOM 操作的耗时逻辑移出主线程：
- 新建 worker.js，用 postMessage 与主线程通信
- 适合场景：JSON 解析与校验、大量数组 map/filter、Base64 编解码、RSA 加密
- 注意：Worker 无法访问 window、document、localStorage，只能传结构化数据
