ASP.NET GridView大表格行可见性切换卡顿崩溃，求高效实现方案

使用VB.NET的<asp:GridView>生成单列HTML表格后，绑定的toggleHide函数在数据量超过100行时出现页面卡顿甚至崩溃。原函数通过循环遍历表格行，逐行读取DOM文本并修改样式，频繁的DOM访问是核心性能瓶颈，同时原代码存在拼写错误（innertText应为textContent），进一步加剧了问题。

以下是高效的替代实现方案：

方案1：预缓存行数据，彻底避免重复DOM读取 #

页面加载时一次性读取所有行的文本内容并建立映射，后续操作直接使用缓存数据，完全消除循环中的DOM读取开销。

// 页面加载完成后缓存行数据
let rowMap = new Map();
let allRows = [];

document.addEventListener('DOMContentLoaded', function() {
  const tb = document.getElementById('myTab');
  if (!tb) return;
  
  allRows = Array.from(tb.rows);
  allRows.forEach(row => {
    // 使用textContent兼容性更好，trim避免空白字符干扰匹配
    const rowText = row.cells[0].textContent.trim();
    if (!rowMap.has(rowText)) {
      rowMap.set(rowText, []);
    }
    rowMap.get(rowText).push(row);
  });
});

// 优化后的toggleHide函数
function toggleHide(val) {
  if (!rowMap || !allRows.length) return false;
  
  // 统一显示所有行，合并浏览器重排操作
  allRows.forEach(row => {
    row.style.display = '';
  });
  
  // 隐藏目标行
  const targetRows = rowMap.get(val.trim());
  if (targetRows) {
    targetRows.forEach(row => {
      row.style.display = 'none';
    });
  }
  
  return false;
}

方案2：用CSS类控制显示，减少DOM样式操作开销 #

通过定义CSS类来控制行的隐藏/显示，浏览器对类的样式应用有专门优化，比直接修改行内样式更高效。

第一步：添加CSS类定义 #

/* 定义行隐藏类 */
.hidden-row {
  display: none;
}

第二步：缓存数据并修改函数逻辑 #

// 页面加载时缓存行数据（同方案1）
let rowMap = new Map();
let allRows = [];

document.addEventListener('DOMContentLoaded', function() {
  const tb = document.getElementById('myTab');
  if (!tb) return;
  
  allRows = Array.from(tb.rows);
  allRows.forEach(row => {
    const rowText = row.cells[0].textContent.trim();
    if (!rowMap.has(rowText)) {
      rowMap.set(rowText, []);
    }
    rowMap.get(rowText).push(row);
  });
});

// 优化后的toggleHide函数
function toggleHide(val) {
  if (!rowMap || !allRows.length) return false;
  
  // 移除所有行的隐藏类，统一显示
  allRows.forEach(row => {
    row.classList.remove('hidden-row');
  });
  
  // 给目标行添加隐藏类
  const targetRows = rowMap.get(val.trim());
  if (targetRows) {
    targetRows.forEach(row => {
      row.classList.add('hidden-row');
    });
  }
  
  return false;
}

方案3：合并DOM操作，减少重排重绘次数 #

如果无法预缓存数据，可将所有DOM修改放入requestAnimationFrame中，让浏览器合并重排重绘操作，降低性能消耗。

// 定义CSS类（同方案2）
// .hidden-row { display: none; }

function toggleHide(val) {
  const tb = document.getElementById('myTab');
  if (!tb) return false;
  
  const trows = tb.rows;
  const targetVal = val.trim();
  
  // 用requestAnimationFrame合并所有DOM修改
  requestAnimationFrame(() => {
    for (let i = 0; i < trows.length; i++) {
      const rowText = trows[i].cells[0].textContent.trim();
      if (rowText === targetVal) {
        trows[i].classList.add('hidden-row');
      } else {
        trows[i].classList.remove('hidden-row');
      }
    }
  });
  
  return false;
}

关键优化点总结：

• 避免循环中重复读取DOM内容，尽可能提前缓存数据
• 使用CSS类替代直接修改行内样式，利用浏览器样式优化机制
• 合并DOM操作，减少浏览器重排重绘的次数
• 修正原代码中的拼写错误（innertText→textContent）

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