本文介绍在不改变分页等展示逻辑的前提下，通过流式加载与增量渲染技术，显著提升6万行简单表格在浏览器中的显示速度，避免一次性插入导致的长时间阻塞。
当使用 $("#mydiv").load("/content") 加载一个包含6万行、约3.5MB的纯文本HTML表格时，虽然网络请求仅耗时1秒，但浏览器需解析、构建DOM、布局并绘制全部节点——这一过程极易触发主线程长时间阻塞，导致长达1分钟的白屏或无响应，严重影响用户体验。
根本原因在于：浏览器对单次大批量DOM操作极其低效。一次性插入数万个 <tr> 会强制触发多次重排（reflow）与重绘（repaint），且JavaScript执行与渲染共用主线程，无法并发处理。
✅ 推荐解决方案：分块异步加载 + requestIdleCallback / setTimeout 批量追加
不依赖服务端分页改造，而是通过AJAX获取结构化数据（如JSON），再在前端按批次动态创建并插入DOM：
立即学习“前端免费学习笔记（深入）”；
async function renderLargeTable(url, batchSize = 500) {
const response = await fetch(url);
const data = await response.json(); // 假设后端返回 [{col1:"a",col2:"b"}, ...]
const table = document.getElementById("mytable");
const fragment = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
const row = document.createElement("tr");
row.innerHTML = `<td>${escapeHtml(data[i].col1)}</td><td>${escapeHtml(data[i].col2)}</td>`;
fragment.appendChild(row);
// 每batchSize行批量插入一次，避免连续DOM操作
if ((i + 1) % batchSize === 0 || i === data.length - 1) {
table.appendChild(fragment);
// 清空fragment，准备下一批
fragment.replaceChildren();
// 让出主线程，允许渲染和事件响应
await new Promise(r => setTimeout(r, 0));
}
}
}
// 简单HTML转义，防止XSS
function escapeHtml(str) {
return str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
}? 关键优化点说明：
- 避免 .innerHTML += ...：字符串拼接再赋值会反复销毁重建DOM，性能极差；
- 使用 DocumentFragment：将多行暂存于内存片段，最后一次性挂载，大幅减少重排次数；
- 主动让出主线程（setTimeout(r, 0)）：防止JS长时间独占主线程，保障页面可交互性；
- 服务端建议返回JSON而非HTML：减小传输体积（无标签冗余）、提升解析效率、增强前端控制力；若必须返回HTML，可考虑流式解析（如 ReadableStream + TextDecoder），但兼容性要求较高。
⚠️ 注意事项：
- 切勿在循环中直接 table.appendChild(row) —— 6万次DOM操作将使性能雪崩；
- 避免使用jQuery链式操作（如 $row.appendTo($table)）处理海量节点，原生DOM API更轻量；
- 若需支持IE，requestIdleCallback 需降级为 setTimeout；现代应用推荐结合 IntersectionObserver 实现可视区懒渲染。
总结：渲染瓶颈不在网络，而在DOM批量操作。通过“数据分片 + 文档片段 + 主线程让渡”三重策略，可将6万行表格的首屏可见时间从分钟级压缩至3–5秒内，同时保持代码简洁与可维护性。
