火狐浏览器高频JS循环卡死优化方法

火狐浏览器运行包含实时数据刷新、监控看板或协作编辑类网页时，因JavaScript高频循环反复读取DOM、计算布局、触发重排，容易导致主线程被锁死。具体表现为鼠标悬停无反应、滚动卡顿、右键菜单无法弹出，严重时会出现“正在执行脚本”的警告，随后浏览器彻底无响应。

遇到这种情况，先不要急于关闭浏览器，建议先确认问题是否确实由循环引发。

先确认是否真由循环引发

按F12打开开发者工具，切换至“性能”标签页，点击●录制按钮，在问题页面上操作约10秒，再点击●停止。重点观察火焰图中“Scripting”区域是否存在连续的长条状高负载区块。如果Layout/Recalculate Style也同步密集堆叠，则基本是循环与DOM操作双重拖累。若仅Scripting区域持续满载，Layout区域平坦，说明问题纯粹出在JS逻辑本身，与DOM无关，此时可直接跳过渲染优化，直接对循环进行改造。

禁用AI功能与智能标签分组（必须第一步）

Firefox 120及以上版本默认开启了browser.ml.chat.enabled和browser.tabs.groups.smart.enabled两项AI功能，它们在后台持续运行推理循环，会抢占主线程资源，与网页自身的循环叠加形成雪崩效应。因此第一步必须将其关闭。

在地址栏输入about:config，回车，点击“I'll be careful, I promise”，然后依次搜索并将以下两项设为false：

① browser.ml.chat.enabled
② browser.tabs.groups.smart.enabled

【必须关闭所有Firefox窗口（包括任务管理器中的firefox.exe进程）再重启，否则AI模块不会真正卸载】

用DocumentFragment批量插入替代逐个appendChild

解决高频DOM写入卡死最直接有效的手段就是使用DocumentFragment。每次appendChild都会触发重排，100次循环即100次强制重排，浏览器难以承受。将原有代码：

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

改为：

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

操作简单：将循环体内appendChild的目标从容器改为fragment，最后一次性挂载。浏览器只执行一次重排，性能提升立竿见影。

将dom.max_script_run_time阈值从10改为3

Firefox默认脚本超时时间为10秒，但用户此时已在卡死边缘等待9秒——内存已严重碎片化，强行继续只会导致更彻底的崩溃。将阈值压至3秒，可抢在主线程彻底锁死前切断异常循环。

在地址栏输入about:config，回车，点击“I'll be careful, I promise”，搜索dom.max_script_run_time，双击该条目，将数值从10改为3，确认保存。【彻底关闭所有火狐窗口（含后台进程），再重新启动】

注意：设为1会导致表单验证、滚动加载等正常交互被误杀，3是实测安全下限。

用requestIdleCallback切分长循环

当无法重构算法、必须保留大循环时，可使用requestIdleCallback将执行拆分为小块，主动让出主线程控制权，避免阻塞渲染和用户输入。

方法一：基础切分

function processInChunks(items, callback, chunkSize = 20) {
  let index = 0;
  function next() {
    if (index >= items.length) return;
    const end = Math.min(index + chunkSize, items.length);
    for (let i = index; i < end; i++) {
      callback(items[i]);
    }
    index = end;
    requestIdleCallback(next);
  }
  next();
}

方法二：带超时兜底（防空闲时间过长）

requestIdleCallback(() => {
  // 你的循环体
}, { timeout: 2000 });

这比setTimeout模拟更精准——它只在浏览器空闲时执行，不会干扰动画帧或用户操作。