JavaScript表格日期降序排序函数处理大数据集时性能异常求助

实现mm/dd/yyyy格式的表格日期排序时，升序功能在大数据集下表现正常，但改为降序排序（将比较符改为小于号）后，小数据集可正常运行，大数据集则出现循环卡顿。相关代码如下：

WebApp.sortDateReverse = function(colNam, colNum) 
{
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  console.log('This is colNum', colNum);
  console.log('This is colName', colNam);
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done    
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for(i = 1;i<(rows.length - 1);i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      console.log('This is i:', i);
      console.log('This is row length:', rows.length);
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[colNum];
      y = rows[i + 1].getElementsByTagName("TD")[colNum];
      //check if the two rows should switch place:
      if (WebApp.convertDate(x.innerHTML) < WebApp.convertDate(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        //console.log('Switching x:', x.innerHTML , 'with y:', y.innerHTML);
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
};

WebApp.convertDate = function(d) {
  return Date.parse(d)
};

问题根源 #

1. 动态DOM集合导致循环异常：table.rows是动态的HTMLCollection，每次调用insertBefore后，集合的长度和元素顺序会实时变化。大数据集下，循环边界rows.length -1不断变动，导致循环无法正常终止，出现卡顿甚至死循环。
2. 重复DOM查询与日期解析：每次循环都要通过getElementsByTagName获取TD元素，且重复调用Date.parse解析日期，额外消耗大量性能。
3. 低效排序算法：手写的冒泡排序时间复杂度为O(n²)，大数据集下本身性能就差，叠加上述DOM操作的开销后，卡顿问题被放大。

优化方案 #

核心思路是脱离DOM操作排序，预计算缓存数据，使用高效排序算法，优化后的代码如下：

WebApp.sortDateReverse = function(colNam, colNum) {
  const table = document.getElementById("myTable");
  const tbody = table.tBodies[0] || table;
  // 提取行数据为数组，排除表头行
  const rowsArray = Array.from(tbody.rows).slice(1);
  
  // 预解析日期并缓存，避免重复计算
  const sortedRows = rowsArray.map(row => ({
    element: row,
    date: WebApp.convertDate(row.getElementsByTagName("TD")[colNum].innerHTML)
  }))
  // 降序排序，使用原生优化后的排序算法
  .sort((a, b) => b.date - a.date)
  .map(item => item.element);
  
  // 一次性更新DOM，减少重排重绘
  tbody.innerHTML = "";
  // 插回表头
  tbody.appendChild(table.rows[0]);
  // 插入排序后的行
  sortedRows.forEach(row => tbody.appendChild(row));
};

WebApp.convertDate = function(d) {
  return Date.parse(d);
};

优化说明 #

• 数组化处理DOM行：将动态的HTMLCollection转为静态数组，避免排序过程中DOM变动影响循环逻辑。
• 预缓存日期值：仅解析一次每个行的日期，大幅减少Date.parse的调用次数。
• 使用原生数组排序：Array.sort()内部采用优化的排序算法（如V8引擎的Timsort），时间复杂度优于手写冒泡，大数据集下性能提升显著。
• 批量更新DOM：清空tbody后一次性插入所有行，减少浏览器重排重绘的次数，进一步提升性能。

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