页面无响应主因是JavaScript主线程被长期占用，常见于死循环或同步阻塞；可通过Console判断卡死状态，Performance定位长任务，Sources强制中断查看执行位置，再结合debugger和日志精准排查。
页面无响应，大概率是 JavaScript 主线程被长期占用，最常见就是死循环或同步阻塞操作。运行时分析不依赖复现步骤，而是直接观察浏览器当前状态，快速圈定问题代码范围。
看控制台是否卡死或报错
打开开发者工具（F12）→ Console 面板：
- 如果控制台完全空白、无法输入、光标不闪烁，说明 JS 线程已被锁死，极可能处于死循环中；
- 如果有持续滚动的日志（比如反复打印同一句 console），说明存在未设退出条件的循环体；
- 若出现 RangeError: Maximum call stack size exceeded，是递归过深；出现 Out of memory，可能是循环中不断创建对象或拼接字符串。
用 Performance 面板抓帧定位耗时函数
切换到 Performance 面板 → 点击录制（●）→ 触发页面卡顿 → 停止录制：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在火焰图（Flame Chart）中找持续占用主线程超过 100ms 的长任务（红色/橙色块）；
- 点击该长任务，下方“Bottom-Up”或“Call Tree”会列出调用栈，顶部函数即嫌疑最大；
- 重点关注 while、for(;;)、for...in（遍历大对象）、数组方法链式调用（如 filter().map().reduce() 处理万级数据） 等高风险结构。
用 Sources 面板强制中断并查看执行位置
在页面卡住时，直接按 Pause script execution（⏸️）按钮（或快捷键 Ctrl+\）：
立即学习“前端免费学习笔记（深入）”；
- 执行会立即暂停，Sources 面板自动跳转到正在运行的 JS 行；
- 观察右侧“Scope”面板中的变量值：如果某个计数器始终不变、数组长度无限增长、时间戳停滞，基本可确认是此处循环失控；
- 若停在第三方库中（如 moment.js、lodash），不要盲目怀疑，先检查你传入的参数是否异常（例如传入 undefined 做循环条件）。
配合 debugger 和日志缩小范围
若上述方法仍不够明确，可在疑似区域手动加探测点：
- 在可疑循环开始前加 debugger，刷新后触发断点，单步执行几步看是否进入无限分支；
- 在循环体内加 console.log(i, Date.now())，观察输出是否突然中断或时间戳长时间不更新；
- 对复杂逻辑，用“代码删除法”：注释掉部分逻辑块，逐步排除，直到页面恢复响应，再反向定位被注释掉的那部分。
