为何这段JavaScript代码陷入卡顿无法运行？

云原生阿岚

2026-5-20

解决JS代码导致页面卡顿崩溃的问题

兄弟，我太懂这种JSLint检测全绿，但代码一跑就直接卡死浏览器的崩溃感了！这种情况十有八九是代码里藏着无限循环、无终止递归或者过量DOM操作，浏览器的主线程被占满，根本没时间响应其他操作。

我给你列几个排查和解决的关键点：

先揪出无限循环/递归
打开浏览器开发者工具的「控制台」，如果代码卡死后控制台没有报错，但CPU占用拉满，大概率是循环没终止。比如检查你的while/for循环：变量是不是在循环里被错误重置？终止条件是不是永远无法满足？递归函数有没有正确的基线退出条件？
举个典型的错误例子：
```
let count = 0;
while (count < 5) {
  console.log("循环中...");
  count = 0; // 每次都把count重置为0，永远跳不出循环！
}
```

优化过量的DOM操作
如果你的代码在循环里反复添加/修改DOM元素，浏览器会频繁触发重排重绘，直接把主线程堵死。这种情况可以用「文档片段」批量处理DOM：

// 错误写法：每次循环都操作DOM，触发1000次重排
for (let i = 0; i < 1000; i++) {
  const p = document.createElement('p');
  p.textContent = `第${i}段内容`;
  document.body.appendChild(p);
}

// 正确写法：用DocumentFragment批量插入，只触发1次重排
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const p = document.createElement('p');
  p.textContent = `第${i}段内容`;
  fragment.appendChild(p);
}
document.body.appendChild(fragment);