火狐浏览器因JavaScript高频循环导致主线程锁死，需通过性能面板确认是否为循环+DOM操作双重拖累，优先禁用AI功能，再用DocumentFragment批量插入和requestIdleCallback分片执行优化。
火狐浏览器在打开含实时数据刷新、监控看板或协作编辑类网页时，常因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功能，它们在后台持续运行推理循环，会抢占主线程资源，与网页自身循环叠加形成雪崩效应。
立即学习“Java免费学习笔记（深入）”；
地址栏输入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写入卡死最直接有效的手段。每次appendChild都会触发重排，100次循环就是100次强制重排，浏览器根本扛不住。
把原来这样的代码：
for (let i = 0; i < 100; i++) {<br> const div = document.createElement('div');<br> div.textContent = i;<br> container.appendChild(div);<br>}
改成：
const fragment = document.createDocumentFragment();
for (let i = 0; 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秒能抢在主线程彻底锁死前切断异常循环。
1、地址栏输入about:config→回车→点“I'll be careful, I promise”
2、搜索dom.max_script_run_time→双击该条目
3、把数值从10改为3→确认保存
4、【彻底关闭所有火狐窗口（含后台进程），再重新启动】
注意：设为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 callback(items[i]);
}
index = end;
requestIdleCallback(next);
}
next();
}
方法二：带超时兜底（防空闲时间过长）
requestIdleCallback(() => {
// 你的循环体
}, { timeout: 2000 });
这比setTimeout模拟更精准——它只在浏览器空闲时执行，不会干扰动画帧或用户操作。
