长耗时调用栈导致浏览器卡死，本质是JS单线程持续占用主线程阻塞渲染与事件；识别现象包括页面完全冻结、Chrome警告脚本超时、Performance面板显示长时间Scripting。

长耗时调用栈导致浏览器卡死、页面无响应，本质是 JavaScript 在单线程主线程中持续占用调用堆栈，阻塞了渲染、事件响应和定时器执行。这不是网络请求慢的问题，而是代码逻辑本身“堵死了”浏览器。

识别是否为调用栈阻塞

当出现以下现象，大概率是调用栈过长而非网络或后端问题：

• 页面完全冻结：无法点击按钮、滚动、输入文字，甚至右键菜单都打不开
• Chrome 弹出“脚本运行时间过长”警告（通常超 30 秒）
• 其他标签页正常，仅当前页面卡住
• DevTools 的 Performance 面板显示主线程长时间处于 “Scripting” 状态，无空闲片段

避免同步重计算与长循环

JavaScript 中看似简单的操作，在数据量大时会变成性能炸弹：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

• 避免在 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，只能传结构化数据