如何提升 Firefox 中大规模 checkbox 渲染性能问题

firefox 在渲染超过 50,000 个复选框时会出现严重卡顿甚至页面无响应，而 chrome/edge 表现正常；根本原因在于其 dom 渲染与事件系统对海量表单控件的低效处理，需通过虚拟滚动、分页或动态加载规避。

firefox 在渲染超过 50,000 个复选框时会出现严重卡顿甚至页面无响应，而 chrome/edge 表现正常；根本原因在于其 dom 渲染与事件系统对海量表单控件的低效处理，需通过虚拟滚动、分页或动态加载规避。

该问题并非代码逻辑错误，而是 Firefox 浏览器自身对大量 <input type="checkbox"> 元素的 DOM 构建与样式计算存在显著性能瓶颈。当一次性插入数万级 checkbox（尤其嵌套在 label 内、带 class 和内联属性）时，Firefox 会触发高频重排（reflow）与重绘（repaint），并为每个 checkbox 初始化表单状态、焦点管理及可访问性（a11y）支持，导致主线程长时间阻塞——这正是您观察到“fetch 完成后仍挂起”的原因。

以下为专业级解决方案，按推荐优先级排序：

✅ 1. 虚拟滚动（Virtual Scrolling）——最优解

仅渲染可视区域内的 checkbox，DOM 节点数恒定（通常 < 100），彻底规避性能瓶颈：

// 示例：使用轻量库 `virtua`（无需框架依赖）import { createScroller } from 'virtua';const scroller = createScroller({  container: document.getElementById('resultsProductContent'),  count: result_filenames.length / 2, // 文件数量  estimateSize: () => 48, // 每行高度预估（px）  render: (index) => {    const x = index * 2;    const filename = result_filenames[x];    const filesize = parseInt(result_filenames[x + 1]);    const formattedSize = filesize > 1e6       ? `${(filesize / 1e6).toFixed(2)}GB`      : filesize > 1e3         ? `${(filesize / 1e3).toFixed(2)}MB`         : `${filesize}KB`;    return `      <div class="form-check">        <label class="form-check-label">          <input type="checkbox" class="form-check-input"                  data-index="${index}" ${/* 默认选中逻辑 */'checked'}>          ${filename}   ${formattedSize}        </label>      </div>    `;  }});

⚠️ 注意：需配合 data-index 绑定真实数据索引，并在提交时批量读取选中状态（避免 document.querySelectorAll('input[type=checkbox]:checked') 遍历全量 DOM）。

✅ 2. 分页加载（Pagination）——兼容性强

将 100k+ 文件拆分为每页 500–2000 条，用户按需翻页：

const PAGE_SIZE = 1000;let currentPage = 0;function renderPage(pageIndex) {  const start = pageIndex * PAGE_SIZE;  const end = Math.min(start + PAGE_SIZE, result_filenames.length);  let string = '';  for (let x = start; x < end; x += 2) {    // ... 同原逻辑构建单条 HTML ...  }  document.getElementById('resultsProductContent').innerHTML = string;}// 初始加载第0页renderPage(0);

⚠️ 3. 禁用 checkbox（不推荐但可应急）

如业务允许临时降级，改用纯文本 + 手动维护选中状态数组：

// 移除 checkbox，用 span 模拟视觉效果string += `<div class="file-item" data-index="${id_num}"                 onclick="toggleSelection(${id_num})">            <span class="selection-indicator">${selected.has(id_num) ? '✓' : '○'}</span>            ${string_filename}   ${string_filesize}          </div>`;

? 根本原因补充说明

Firefox 的 checkbox 性能问题源于其 Gecko 渲染引擎对 <input> 元素的深度 DOM 绑定机制：每个 checkbox 都会创建独立的 HTMLInputElement 实例，关联样式树、布局树及事件监听器，而 Chrome（Blink）采用更激进的懒初始化与共享渲染路径。官方 Bugzilla 曾多次报告类似问题（如 Bug 1527249），但因架构复杂性未彻底修复。

总结：切勿在 Firefox 中一次性渲染 >50k checkbox。务必采用虚拟滚动或分页方案，并通过 requestIdleCallback 或 setTimeout(..., 0) 异步分批渲染以保障主线程响应性。同时建议服务端增加「最大返回条数」限制与提示，从源头控制前端负载。