请求：使用归并排序（Merge Sort）优化JavaScript表格列排序性能

嘿，我太懂你这种面对大型表格排序卡到崩溃的感受了——看着页面半天没反应，甚至浏览器都提示无响应，真的头疼。先拆解下你当前代码的核心问题：

• 用了冒泡排序：时间复杂度是O(n²)，数据量超过1000行的话，性能会断崖式下跌；
• 直接操作DOM进行比较：每次循环都要读取DOM元素的内容，DOM操作是浏览器最耗时的操作之一，反复读写会严重拖慢速度。

下面给你几个从基础到进阶的优化方案，一步步解决问题：

核心优化：脱离DOM排序 + 高效排序算法 #

最关键的优化是把数据从DOM中抽离，在内存里用原生Array.sort()排序，最后一次性更新DOM。原生Array.sort()在V8引擎中用的是Timsort算法，平均时间复杂度O(n log n)，比冒泡排序快几个数量级；而且只做一次DOM更新，避免了反复操作DOM的开销。

优化后的基础版代码 #

function sortTable(columnIndex) {
  const table = document.getElementById("AdminT");
  const tbody = table.tBodies[0];
  // 把DOM行转成数组，方便排序
  const rows = Array.from(tbody.querySelectorAll("tr"));

  rows.sort((rowA, rowB) => {
    // 获取列内容并去除首尾空格
    const cellA = rowA.cells[columnIndex].textContent.trim();
    const cellB = rowB.cells[columnIndex].textContent.trim();

    // 区分数字和字符串排序，避免"10"排在"2"前面的问题
    const isNumber = !isNaN(parseFloat(cellA)) && isFinite(cellA);
    if (isNumber) {
      return parseFloat(cellA) - parseFloat(cellB);
    }
    // 字符串排序支持大小写不敏感，更符合用户预期
    return cellA.localeCompare(cellB, undefined, { sensitivity: 'base' });
  });

  // 一次性更新DOM：append会把已有节点移动，不会重新创建，性能很高
  rows.forEach(row => tbody.appendChild(row));
}

进一步优化：缓存排序状态 + 避免重复计算 #

如果需要支持升降序切换，或者不想每次排序都重新读取DOM内容，可以加个状态缓存：

// 缓存当前排序的列和方向
let currentSortColumn = -1;
let currentSortDir = 'asc';

function sortTable(columnIndex) {
  const table = document.getElementById("AdminT");
  const tbody = table.tBodies[0];
  const rows = Array.from(tbody.querySelectorAll("tr"));

  // 点击同一列时切换排序方向
  if (columnIndex === currentSortColumn) {
    currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
  } else {
    currentSortDir = 'asc';
    currentSortColumn = columnIndex;
  }

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].textContent.trim();
    const cellB = rowB.cells[columnIndex].textContent.trim();

    const isNumber = !isNaN(parseFloat(cellA)) && isFinite(cellA);
    let comparison;
    if (isNumber) {
      comparison = parseFloat(cellA) - parseFloat(cellB);
    } else {
      comparison = cellA.localeCompare(cellB, undefined, { sensitivity: 'base' });
    }

    // 根据排序方向反转结果
    return currentSortDir === 'desc' ? -comparison : comparison;
  });

  // 用扩展运算符一次性插入所有行，代码更简洁
  tbody.append(...rows);
}

超大型表格（10k+行）的进阶优化：虚拟滚动 #

如果表格有上万条甚至更多数据，即使排序快，渲染所有DOM节点也会让页面卡顿。这时候可以用虚拟滚动，只渲染当前可见区域的行，剩下的滚动时再动态加载：

核心思路 #

1. 把所有数据存在一个JavaScript数组里（而不是DOM节点）；
2. 计算可见区域的行数，只渲染这些行；
3. 监听滚动事件，动态更新渲染的行范围。

简化版虚拟滚动代码 #

// 假设这是从后端获取的原始数据（替换成你的实际数据）
const tableData = [
  { col1: "John", col2: 25 },
  { col1: "Alice", col2: 30 },
  // ... 上万条数据
];

const rowHeight = 30; // 每行固定高度（可以根据实际情况调整）
const visibleRows = 20; // 一次渲染的可见行数
const table = document.getElementById("AdminT");
const tbody = table.tBodies[0];

// 渲染可见区域的行
function renderVisibleRows(startIndex) {
  tbody.innerHTML = "";
  const endIndex = Math.min(startIndex + visibleRows, tableData.length);
  for (let i = startIndex; i < endIndex; i++) {
    const row = document.createElement("tr");
    // 根据数据创建单元格（替换成你的表格列）
    row.innerHTML = `<td>${tableData[i].col1}</td><td>${tableData[i].col2}</td>`;
    tbody.appendChild(row);
  }
}

// 初始化渲染
renderVisibleRows(0);

// 监听滚动事件，动态更新渲染内容
table.addEventListener("scroll", (e) => {
  const startIndex = Math.floor(e.target.scrollTop / rowHeight);
  renderVisibleRows(startIndex);
});

// 排序时直接操作数据数组，再重新渲染可见行
function sortTable(columnIndex) {
  // 根据列索引对应的数据字段排序（替换成你的字段名）
  const sortKey = columnIndex === 0 ? "col1" : "col2";
  
  tableData.sort((a, b) => {
    const valA = a[sortKey];
    const valB = b[sortKey];
    const isNumber = !isNaN(parseFloat(valA)) && isFinite(valA);
    return isNumber ? parseFloat(valA) - parseFloat(valB) : valA.localeCompare(valB);
  });

  // 重新渲染当前可见的行
  const startIndex = Math.floor(table.scrollTop / rowHeight);
  renderVisibleRows(startIndex);
}

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