firefox 在渲染超过 50,000 个复选框时会出现严重卡顿甚至页面无响应，而 chrome/edge 表现正常；根本原因在于其 dom 渲染与事件系统对海量表单控件的低效处理，需通过虚拟滚动、分页或动态加载规避。
firefox 在渲染超过 50,000 个复选框时会出现严重卡顿甚至页面无响应，而 chrome/edge 表现正常；根本原因在于其 dom 渲染与事件系统对海量表单控件的低效处理，需通过虚拟滚动、分页或动态加载规避。
该问题并非代码逻辑错误，而是 Firefox 浏览器自身对大量 元素的 DOM 构建与样式计算存在显著性能瓶颈。当一次性插入数万级 checkbox（尤其嵌套在 label 内、带 class 和内联属性）时，Firefox 会触发高频重排（reflow）与重绘（repaint），并为每个 checkbox 初始化表单状态、焦点管理及可访问性（a11y）支持，导致主线程长时间阻塞——这正是您观察到“fetch 完成后仍挂起”的原因。
以下为专业级解决方案，按推荐优先级排序：
✅ 1. 虚拟滚动（Virtual Scrolling）——最优解
仅渲染可视区域内的 checkbox，DOM 节点数恒定（通常
// 示例：使用轻量库 `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}">
${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 <h3>⚠️ 3. 禁用 checkbox（不推荐但可应急）</h3><p>如业务允许临时降级，改用纯文本 + 手动维护选中状态数组：</p><pre class="brush:php;toolbar:false;">// 移除 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 渲染引擎对 元素的深度 DOM 绑定机制：每个 checkbox 都会创建独立的 HTMLInputElement 实例，关联样式树、布局树及事件监听器，而 Chrome（Blink）采用更激进的懒初始化与共享渲染路径。官方 Bugzilla 曾多次报告类似问题（如 Bug 1527249），但因架构复杂性未彻底修复。
总结：切勿在 Firefox 中一次性渲染 >50k checkbox。务必采用虚拟滚动或分页方案，并通过 requestIdleCallback 或 setTimeout(..., 0) 异步分批渲染以保障主线程响应性。同时建议服务端增加「最大返回条数」限制与提示，从源头控制前端负载。
