优化HTML表格过滤列求和性能：如何提升JS函数运行速度？

你的代码运行慢的核心原因是循环内重复执行DOM查询，2000行表格要做2000次重复的元素查找、可见性判断，DOM操作是JS里性能开销最大的操作之一，这样反复调用自然会拖慢速度。以下是几个易理解、见效快的优化方案：

核心优化思路 #

把「循环内多次DOM查询」改成「一次性获取所有目标元素」，尽可能减少与DOM的交互次数——能一次拿到的元素绝不分多次查。

具体优化步骤 #

1. 一次性筛选所有可见行，避免循环内判断可见性 #

原代码按索引遍历所有行再逐个判断是否可见，相当于每行都要重新查一次DOM。改成直接筛选出所有可见行，再遍历这个集合：

// 原生API方式，性能优于jQuery
const visibleRows = document.querySelectorAll(`#${tabID} tbody tr:visible`);
// 若习惯用jQuery，也可以这么写
const visibleRows = $(`#${tabID} tbody tr:visible`);

2. 缓存DOM元素，避免重复查询 #

提前获取表格、结果展示元素，不要在循环里反复调用getElementById或jQuery选择器：

const resultEl = document.getElementById(colS);

3. 减少DOM读取次数，缓存单元格内容 #

循环内不要多次读取单元格内容，读一次就存到变量里，避免重复访问DOM节点：

const cellText = row.cells[colNum].textContent.trim(); // 用textContent比innerHTML更安全，还能自动去空格
if (cellText) {
  sumCol += parseInt(cellText, 10); // 记得加进制参数10，避免意外解析成八进制
}

4. 优先用原生DOM API替代jQuery #

原生方法的性能普遍优于jQuery，处理大量元素时，能不用jQuery就不用。

优化后的完整代码（原生JS版本） #

function htmlTableColSum(tabID, colNum, colS, rec) {
  let sumCol = 0;
  // 一次性获取所有可见行
  const visibleRows = document.querySelectorAll(`#${tabID} tbody tr:visible`);
  const resultEl = document.getElementById(colS);

  // 遍历可见行求和
  for (const row of visibleRows) {
    const cell = row.cells[colNum];
    if (!cell) continue; // 防止列序号超出表格范围
    const cellText = cell.textContent.trim();
    if (cellText) {
      sumCol += parseInt(cellText, 10);
    }
  }

  // 单位转换与结果格式化
  sumCol /= rec;
  if (rec > 1) {
    sumCol = sumCol.toFixed(2);
  }

  resultEl.textContent = sumCol; // 用textContent比innerHTML更安全
}

优化后的jQuery版本（适合习惯用jQuery的场景） #

function htmlTableColSum(tabID, colNum, colS, rec) {
  let sumCol = 0;
  // 一次性获取所有可见行并遍历
  $(`#${tabID} tbody tr:visible`).each(function() {
    const cellText = $(this).find('td').eq(colNum).text().trim();
    if (cellText) {
      sumCol += parseInt(cellText, 10);
    }
  });

  // 单位转换与结果格式化
  sumCol /= rec;
  if (rec > 1) {
    sumCol = sumCol.toFixed(2);
  }

  $(`#${colS}`).text(sumCol);
}

额外进阶优化建议 #

如果表格的过滤逻辑是你自己实现的，可以在过滤操作时同步维护一个可见行的数组，求和时直接遍历这个数组，完全不用再查DOM，性能会再提升一个档次。

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