超万行HTML表格搜索卡顿，求高效JS优化方案

哇，10000行的表格确实很考验前端性能，你的原代码卡顿主要是因为重复遍历DOM、频繁触发DOM操作以及缺少防抖处理。咱们一步步来优化：

先拆解原代码的性能瓶颈 #

• 每次输入都要遍历所有行两次：先全隐藏，再遍历找匹配项，10000行就是20000次DOM访问，开销极大
• 隐藏行时还多余遍历了每个单元格，完全没必要，直接操作整行就行
• 没有防抖：输入每个字符都触发一次搜索，浏览器根本来不及处理完上一次请求就又要执行新的
• 混用原生JS和jQuery，DOM操作的切换会带来额外性能损耗
• 直接读取innerHTML，会解析HTML内容，比读取纯文本慢很多

优化后的代码实现 #

这里整合了几个核心优化点，直接上可运行的代码：

1. 防抖(Debounce)：让搜索函数在用户停止输入300ms后才执行，避免频繁触发
2. 缓存DOM元素：提前获取表格和所有行，不用每次搜索都重新查询DOM
3. 预存行文本：页面加载时把每行需要匹配的第三列文本存起来，避免每次搜索都读取DOM
4. 单次遍历处理：一次遍历完成显示/隐藏，减少DOM操作次数
5. 用textContent替代innerHTML：只读取纯文本，更快更安全
6. 统一用原生JS：避免原生和jQuery切换的开销

<input type="text" id="myInput">
<table id="tabella">
  <tr><th>TIPO</th><th>SCHEMA</th><th>NOME</th><th>DDL</th></tr>
  <!-- 10000+ 表格行 -->
</table>

<script>
// 防抖函数：延迟执行，避免输入过程中频繁触发搜索
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  const input = document.getElementById('myInput');
  const table = document.getElementById('tabella');
  const rows = Array.from(table.rows).slice(1); // 跳过表头行
  // 预存每行第三列的文本（转小写，支持不区分大小写搜索）
  const rowTexts = rows.map(row => row.cells[2].textContent.toLowerCase());

  // 优化后的搜索逻辑
  function searchTable() {
    const searchTerm = input.value.trim().toLowerCase();
    
    rows.forEach((row, index) => {
      // 直接用预存的文本判断，不用再读取DOM
      if (searchTerm === '' || rowTexts[index].includes(searchTerm)) {
        row.style.display = ''; // 恢复默认显示
      } else {
        row.style.display = 'none'; // 隐藏不匹配的行
      }
    });
  }

  // 给输入框绑定防抖后的搜索函数
  input.addEventListener('input', debounce(searchTable));
});
</script>

进阶优化（如果还想追求极致性能） #

如果表格行数实在太多，还可以尝试虚拟滚动：只渲染当前视口内的行，其他行不渲染，彻底解决DOM节点过多的问题（不过实现起来会稍微复杂一点）。

这样改完之后，你会发现输入时几乎没有延迟了，尤其是输入单个字符的时候，防抖会等你输入稳定后再执行搜索，加上预存文本和单次遍历的优化，性能提升非常明显。

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