jQuery大数据表格字母/数字过滤卡顿问题及优化方案咨询

问题背景 #

现有一个包含数千行数据的表格，通过顶部A-Z按钮和数字“1”按钮筛选首字符匹配的行，功能正常但加载速度慢，需要更高效的实现方式。

核心优化思路 #

• 预缓存首字符标识：页面加载时给每一行添加data-first-char属性，存储首字符的大写形式（数字行标记为NUM），避免每次筛选重复查询单元格文本。
• 缓存DOM元素：一次性获取所有需要筛选的行并缓存，避免每次点击都重新遍历DOM。
• 批量DOM操作：先统一判断所有行的显示状态，再一次性更新，减少浏览器回流重绘次数。
• 替换jQuery为原生JS：原生DOM操作在大数据量场景下性能更优。

优化后的代码实现 #

HTML部分

<table id="alphaTable">
  <thead>
    <tr id="alphaTableHeader">
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td>234</td>
    </tr>
    <tr>
      <td>ABC</td>
      <td>ABBC</td>
    </tr>
    <tr>
      <td>BCD</td>
      <td>CDE</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

<ul class="alphaList">
  <li><button>A</button></li>
  <li><button>B</button></li>
  <!-- ... 其他字母按钮 -->
  <li><button>1</button></li>
</ul>

JavaScript部分

// 页面加载完成后预缓存数据
document.addEventListener('DOMContentLoaded', function() {
  const rows = Array.from(document.querySelectorAll('#alphaTable tbody tr'));
  
  // 为每行添加首字符标识
  rows.forEach(row => {
    const firstCellText = row.querySelector('td:first-child').textContent.trim().toUpperCase();
    const firstChar = firstCellText.substring(0, 1);
    const isNum = !isNaN(parseInt(firstChar));
    row.dataset.firstChar = isNum ? 'NUM' : firstChar;
  });

  // 绑定筛选按钮事件
  const buttons = document.querySelectorAll('.alphaList li button');
  buttons.forEach(btn => {
    btn.addEventListener('click', function() {
      const filterValue = this.textContent.trim().toUpperCase();
      const targetChar = isNaN(parseInt(filterValue)) ? filterValue : 'NUM';

      // 批量更新行的显示状态
      rows.forEach(row => {
        row.style.display = row.dataset.firstChar === targetChar ? '' : 'none';
      });
    });
  });
});

额外性能建议 #

• 虚拟滚动：如果表格行数过万，可结合虚拟滚动技术，只渲染当前视口内的行，彻底解决DOM节点过多的性能问题。
• CSS类控制显示：用预定义的hidden类（display: none）代替直接修改style.display，更符合样式与逻辑分离的原则，也方便后续维护。

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