火狐浏览器因gecko引擎对复选框等元素严格初始化及dom高频操作易卡顿，需禁用干扰扩展、用性能工具定位重排瓶颈、启用webrender，并用documentfragment或虚拟滚动优化渲染。
火狐浏览器在打开含大量动态表格、实时数据刷新或高频轮询的网页（如监控看板、股票行情页、协作编辑文档）时，常因JavaScript反复创建/修改DOM节点导致主线程锁死，表现为鼠标悬停无反馈、滚动卡顿、右键菜单弹不出，甚至触发“正在执行脚本”警告后彻底无响应。
Gecko引擎对复选框等表单元素的初始化更严格
Firefox使用Gecko渲染引擎，其对每个 <input type="checkbox"> 节点的处理包含默认属性解析（如 checked=""）、表单关联逻辑校验、无障碍（a11y）属性自动注入。当复选框数量超50,000个时，这些逐节点校验会累积成主线程级阻塞。
Chrome/Edge基于Blink引擎，对同类节点采用批量惰性初始化策略，跳过非可视区域节点的a11y注入与表单绑定，因此在十万级渲染场景下响应更快。
这并非Bug，而是Gecko为保障可访问性与表单语义完整性所作的设计取舍。
禁用非必要扩展并验证DOM操作源头
多个扩展（尤其是脚本管理器、自动填充工具、实时翻译插件）会在页面加载后持续监听DOM变化，与网页自身高频操作叠加，形成事件监听器爆炸式注册或递归调用。
直接在地址栏输入about:addons→ 回车 → 切换到“扩展”页→ 关闭所有非官方、未签名、名称含“script”“inject”“auto”“fill”的扩展 → 刷新问题网页测试响应性。
若卡死消失，说明扩展是诱因；若仍卡死，说明问题来自网页自身DOM逻辑。此时不要急于改代码，先用浏览器自带工具确认是否真由DOM引发。
用性能工具确认重排瓶颈
按F12打开开发者工具 → 切换到“性能”标签页 → 点击左上角●录制按钮 → 在问题页面操作10秒 → 点击●停止 → 查看火焰图中Layout和Recalculate Style区域是否密集堆叠——出现连续长条状区块即证实为DOM重排/重绘瓶颈。
【关键提醒】若“性能”面板处于自动录制状态，Firefox会每毫秒注入钩子函数拦截主线程，这是最直接的卡顿源，必须先关闭再测。
强制启用WebRender并关闭旧版渲染路径
第一步：地址栏输入about:config→ 回车 → 点击“I'll be careful, I promise”
第二步：依次搜索并双击修改以下三项：
① gfx.webrender.all→ 设为【true】
② gfx.webrender.software→ 设为【false】
③ layers.acceleration.force-enabled→ 设为【true】
第三步：关闭所有Firefox窗口（包括后台进程）→ 重新启动浏览器。这一步必须完整退出，否则GPU上下文不会重建。
用DocumentFragment批量插入优化
方法一：原生JS实现
将循环内逐个 appendChild 改为先创建 document.createDocumentFragment()，所有节点追加至该片段，最后一次性插入主DOM树。
方法二：框架层替代
Vue项目改用 v-for + key + 虚拟滚动组件（如 vue-virtual-scroller）；React项目切换至 react-window 或 react-virtualized，仅渲染视口内20–50项。
这一步操作起来很简单，直接把文件拖进去就行。
