如何用DocumentFragment优化上万行表格加载代码以提升速度？

直接循环向DOM插入行/单元格会频繁触发页面重排，这就是你加载慢的核心原因。用DocumentFragment改造的逻辑非常简单，完全不需要修改你现有的单元格创建代码，只需要调整元素的插入目标：

原代码（性能瓶颈版） #

const table = document.getElementById('your-table-id');
const largeData = /* 你的9000-10000条数据数组 */;

for (const item of largeData) {
  const row = document.createElement('tr');
  
  // 你的单元格创建逻辑（和原来完全一样）
  const cell1 = document.createElement('td');
  cell1.textContent = item.field1;
  row.appendChild(cell1);
  
  const cell2 = document.createElement('td');
  cell2.textContent = item.field2;
  row.appendChild(cell2);
  
  // 每次循环都直接操作DOM，触发重排
  table.appendChild(row);
}

优化后代码（用DocumentFragment） #

const table = document.getElementById('your-table-id');
const largeData = /* 你的9000-10000条数据数组 */;
// 创建一个空的DocumentFragment容器
const fragment = document.createDocumentFragment();

for (const item of largeData) {
  const row = document.createElement('tr');
  
  // 👇 这里的单元格插入逻辑完全照搬你原来的代码，不需要改
  const cell1 = document.createElement('td');
  cell1.textContent = item.field1;
  row.appendChild(cell1);
  
  const cell2 = document.createElement('td');
  cell2.textContent = item.field2;
  row.appendChild(cell2);
  
  // 👇 把行添加到fragment，而非直接插入DOM（无重排）
  fragment.appendChild(row);
}

// 👇 最后一次性把所有行插入DOM，只触发一次重排
table.appendChild(fragment);

核心原理 #

DocumentFragment是一个脱离主DOM树的"虚拟容器"，向它添加元素不会触发任何页面重排或重绘。当你把片段插入真实DOM时，浏览器只会把片段里的所有子元素转移到目标节点下，片段本身不会留在DOM中——这相当于一次性完成所有DOM更新，把原来的上万次重排压缩成1次，性能提升非常明显。

额外优化建议 #

如果数据量实在太大（比如超过1万条），可以考虑分批插入：每处理1000行就把片段插入DOM，然后重新创建新的fragment，避免一次性占用过多内存。但对于9000-10000行的规模，直接用单个fragment已经足够解决4秒加载的问题。

内容的提问来源于stack exchange，提问作者StrangerDanger