如果你在用火狐浏览器打开一些监控看板、股票行情页或者在线协作文档时，鼠标突然不动了，滚动卡成PPT，右键菜单半天弹不出来，甚至弹出一个“正在执行脚本”的警告，然后浏览器彻底罢工——那这说的就是你了。

卡顿的根源多半是JavaScript频繁操作DOM，再加上浏览器性能配置没跟上，或者有扩展在背后添乱。

根治的方法并不复杂：先关掉可疑扩展，再用性能工具确认是不是DOM重排惹的祸，然后强制开启WebRender、缩短脚本超时阈值。如果你是开发者，直接用DocumentFragment批量插入也能大幅优化。

禁用非必要扩展并验证DOM操作源头

扩展是卡顿的常见诱因。市面上不少扩展——尤其是脚本管理器、自动填充工具、实时翻译插件——会在页面加载后持续监听DOM变化。

网页自身的高频操作和这些扩展叠加在一起，很容易造成事件监听器爆炸式注册甚至递归调用。这时候，一定得先把扩展带来的干扰排除掉，再定位真正的问题。

关闭可疑扩展的步骤

直接在地址栏输入 about:addons → 按回车 → 切到“扩展”页。把那些非官方的、没签名的、名字里带“script”“inject”“auto”“fill”的，全部关掉。然后刷新问题网页，看看卡死现象是否消失。

如果卡死消失了，说明扩展是诱因；如果依然卡住，问题就来自网页本身的DOM逻辑。别急着改代码，先用浏览器自带工具确认一下是否真是DOM引起的。

确认DOM操作瓶颈

按 F12 打开开发者工具 → 切到“性能”标签页 → 点左上角那个圆点●录制 → 在问题页面上操作10秒 → 再点●停止。然后看火焰图里的 Layout 和 Recalculate Style 区域，如果出现连续的长条状色块，那基本可以断定——DOM重排/重绘瓶颈实锤了。

强制启用WebRender并关闭旧版渲染路径

当Firefox还在用CPU软件渲染去处理高频DOM更新，每帧的合成耗时就会猛增，视觉卡顿和输入延迟几乎是必然的。WebRender能把布局计算和绘制任务甩给GPU，大幅减轻主线程的压力。

操作步骤

第一步：地址栏输入 about:config → 回车 → 点“I'll be careful, I promise”。

第二步：依次搜索以下三项，并双击修改：

• gfx.webrender.all → 设为 【true】
• gfx.webrender.software → 设为 【false】
• layers.acceleration.force-enabled → 设为 【true】

第三步：关闭所有Firefox窗口（后台进程也得关掉），再重新启动浏览器。这一步必须完整退出，否则GPU上下文不会重建。

注意：如果你的显卡驱动版本低于2025年Q3发布的版本，启用WebRender后可能出现文字模糊或闪烁。这时候优先要更新驱动，而不是回退设置。

调整脚本超时阈值防止无限循环拖垮主线程

如果网页里有没做节流的DOM轮询逻辑——比如每50ms读一次元素的offsetTop——Firefox默认要等10秒才会中断脚本。10秒里主线程完全被锁死，用户什么操作都做不了。

方法一：缩短中断时限

1. 地址栏输入 about:config → 回车 → 点承诺提示
2. 搜索 dom.max_script_run_time → 双击
3. 把数值从10改成 【3】 → 回车确认

方法二：启用脚本中断快捷键

1. 同样在 about:config 里搜 dom.allow_scripts_to_close_windows
2. 双击设为 【true】
3. 卡死的时候直接按键盘上的 Esc 键，就可以强制终止当前执行的脚本，不用等那个烦人的警告弹窗。

这步改完之后不需要重启，但一定要注意：必须确保所有Firefox窗口都关闭了再重开，否则老进程还是会沿用原来的超时值。

对网页开发者：用DocumentFragment批量插入替代逐个appendChild

如果你是网页开发者，而且能修改目标页面的JS代码，那根治的方法还是重构DOM操作逻辑。频繁调用 element.appendChild() 会触发多次重排，浏览器也没办法把这些操作合并起来。

优化示例

原代码（逐个插入，触发多次重排）：

for (let i = 0; i < items.length; i++) {
const div = document.createElement('div');
div.textContent = items[i];
container.appendChild(div);
}

改为使用DocumentFragment（只触发一次重排）：

const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
const div = document.createElement('div');
div.textContent = items[i];
fragment.appendChild(div);
}
container.appendChild(fragment);

这样只会触发一次重排，实测下来，插入1000个节点的时间能从800ms降到40ms以内。需要注意：fragment不能直接添加进页面，它的作用就是作为一个中间载体，一次性挂载到DOM树上。