使用JavaScript填充HTML表格速度过慢，求优化方案

问题背景 #

数据库存储约27万条记录，通过Fetch API从Flask后端获取数据速度正常，但前端填充5万条数据到HTML表格时耗时15秒以上，应用完全卡死，推测是频繁DOM操作导致性能瓶颈。原代码如下：

async function getDB(){
  let x;

  console.log('Trying to get the entire database')
  const res = await fetch('http://localhost:5000/getDB')
      .then(function (response){
          return response.json();

      }).then(function (data) {
          x = data
      })
  
  return x
};

function fillData(results){
  results.then(
      function(value) {
          var table = document.getElementById("transactions-table");

          let sortable = [];
          for(var key in value){
              sortable.push([key, value[key]])
          }

          sortable.sort(function(a, b){
              return a[1] - b[1];
          })

          for(var key in value){
              var row = table.insertRow(key);
              var cell1 = row.insertCell(0);
              var cell2 = row.insertCell(1);
              var cell3 = row.insertCell(2);
              var cell4 = row.insertCell(3);
              var cell5 = row.insertCell(4);

              cell1.innerHTML = value[key][0]
              cell2.innerHTML = value[key][1]
              cell3.innerHTML = value[key][2]
              cell4.innerHTML = value[key][3]
              cell5.innerHTML = value[key][4]
          }
          
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0)
          var cell2 = row.insertCell(1)
          var cell3 = row.insertCell(2)
          var cell4 = row.insertCell(3)
          var cell5 = row.insertCell(4)

          cell1.innerHTML = "<b>ID</b>"
          cell2.innerHTML = "<b>Forename</b>"
          cell3.innerHTML = "<b>Surname</b>"
          cell4.innerHTML = "<b>Location</b>"
          cell5.innerHTML = "<b>Amount</b>"
      },
      function(error) {
          console.log('Oh damn')
          console.log(error)
      }
  )
}

核心问题分析 #

1. 频繁DOM操作触发重排：循环中每次调用insertRow和insertCell都会触发浏览器DOM重排/重绘，5万次操作会导致大量性能消耗。
2. 排序逻辑无效：生成sortable数组并排序后，实际遍历的还是原value对象，排序完全没生效。
3. 表头插入时机错误：最后插入表头会导致表格结构混乱，且额外增加一次DOM操作。

优化方案 #

1. 使用DocumentFragment批量处理DOM #

DocumentFragment是内存中的DOM容器，所有节点先添加到片段中，最后一次性插入表格，仅触发一次重排：

function fillData(results){
  results.then(
      function(value) {
          const table = document.getElementById("transactions-table");
          const fragment = document.createDocumentFragment();

          // 先创建表头
          const headerRow = document.createElement('tr');
          const headers = ["<b>ID</b>", "<b>Forename</b>", "<b>Surname</b>", "<b>Location</b>", "<b>Amount</b>"];
          headers.forEach(text => {
              const cell = document.createElement('th');
              cell.innerHTML = text;
              headerRow.appendChild(cell);
          });
          fragment.appendChild(headerRow);

          // 修正排序逻辑，使用排序后的数组
          const sortable = Object.values(value).sort((a, b) => a[1] - b[1]);
          
          // 批量创建数据行
          sortable.forEach(item => {
              const row = document.createElement('tr');
              item.forEach(cellText => {
                  const cell = document.createElement('td');
                  cell.textContent = cellText; // 用textContent替代innerHTML更安全高效
                  row.appendChild(cell);
              });
              fragment.appendChild(row);
          });

          // 一次性插入所有节点
          table.appendChild(fragment);
      },
      function(error) {
          console.error(error);
      }
  )
}

2. 拼接HTML字符串（性能最优的简单方案） #

直接拼接HTML字符串，一次性设置表格的innerHTML，减少DOM操作次数：

function fillData(results){
  results.then(
      function(value) {
          const table = document.getElementById("transactions-table");
          
          // 生成表头HTML
          let html = `<tr><th><b>ID</b></th><th><b>Forename</b></th><th><b>Surname</b></th><th><b>Location</b></th><th><b>Amount</b></th></tr>`;
          
          // 修正排序逻辑
          const sortable = Object.values(value).sort((a, b) => a[1] - b[1]);
          
          // 拼接数据行HTML，注意转义特殊字符避免XSS
          sortable.forEach(item => {
              const escapedItems = item.map(text => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
              html += `<tr><td>${escapedItems[0]}</td><td>${escapedItems[1]}</td><td>${escapedItems[2]}</td><td>${escapedItems[3]}</td><td>${escapedItems[4]}</td></tr>`;
          });
          
          // 一次性设置innerHTML
          table.innerHTML = html;
      },
      function(error) {
          console.error(error);
      }
  )
}

3. 虚拟滚动（处理超大量数据） #

如果必须展示全部5万条数据，推荐使用虚拟滚动：只渲染当前视口可见的行，滚动时动态更新显示内容。核心逻辑：

• 计算可见区域能容纳的行数
• 只渲染可见范围内的数据行
• 根据滚动位置计算需要显示的数据区间
• 通过设置表格容器的padding模拟全部数据的高度，保证滚动条正常显示

4. 后端分页/懒加载 #

和后端配合实现分页接口（比如/getDB?page=1&limit=100），前端每次只请求100条数据，用户点击翻页或滚动到底部时再加载下一页，从根源减少单次渲染的数据量。

额外优化点 #

• 使用textContent替代innerHTML：纯文本内容用textContent更安全，还能避免HTML解析的性能开销。
• 异步拆分渲染：把5万条数据分成多批次（比如每1000条一批），用requestAnimationFrame或setTimeout分批插入，避免主线程长时间阻塞，让页面保持响应。

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