如何加速超长简单HTML表格的浏览器渲染速度？

以下是针对6万行超长表格的渲染优化方法，无需改变表格展示形式：

• 分批插入DOM，使用DocumentFragment
  一次性插入所有行会导致浏览器多次重排重绘，拆分批次（比如每1000行一批），用DocumentFragment暂存每批元素后再插入，同时每次插入后让出主线程，避免阻塞浏览器渲染：

  // 假设已获取到拆分后的行数据数组data（二维数组，每个元素是一行的两列内容）
  const table = document.getElementById('myTable');
  let batchSize = 1000;
  let currentBatch = document.createDocumentFragment();
  
  for (let i = 0; i < data.length; i++) {
    const [col1, col2] = data[i];
    const tr = document.createElement('tr');
    const td1 = document.createElement('td');
    td1.textContent = col1;
    const td2 = document.createElement('td');
    td2.textContent = col2;
    tr.append(td1, td2);
    currentBatch.appendChild(tr);
  
    // 每批次完成或到最后一行时插入DOM
    if ((i + 1) % batchSize === 0 || i === data.length - 1) {
      table.appendChild(currentBatch);
      currentBatch = document.createDocumentFragment();
      // 让出主线程，避免卡顿
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
  

• 设置table-layout: fixed固定布局
  默认的table-layout: auto会让浏览器计算每列的自适应宽度，对大表格来说开销极大。设置固定布局并指定列宽，能跳过大量布局计算：

  #myTable {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse; /* 可选，减少额外布局计算 */
  }
  #myTable td:nth-child(1) {
    width: 30%;
  }
  #myTable td:nth-child(2) {
    width: 70%;
  }
  

• 先隐藏表格再渲染
  在插入内容前将表格设为不可见，完成后再恢复，让浏览器只做一次完整渲染：

  const table = document.getElementById('myTable');
  table.style.visibility = 'hidden'; // 用visibility而非display，避免布局偏移
  
  // 执行插入内容的逻辑...
  
  table.style.visibility = 'visible';
  

• 避免innerHTML，直接用原生DOM方法创建元素
  解析HTML字符串的开销远高于直接创建DOM元素，尤其是超大量内容时，直接用createElement和textContent能节省解析时间：

  const table = document.getElementById('myTable');
  const fragment = document.createDocumentFragment();
  for (const [col1, col2] of data) {
    const tr = document.createElement('tr');
    const td1 = document.createElement('td');
    td1.textContent = col1;
    const td2 = document.createElement('td');
    td2.textContent = col2;
    tr.append(td1, td2);
    fragment.appendChild(tr);
  }
  table.appendChild(fragment);
  

• 启用硬件加速
  通过CSS让浏览器将表格交由GPU渲染，减轻CPU的布局计算压力：

  #myTable {
    will-change: contents;
    transform: translateZ(0);
  }
  

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