如何解决JavaScript排序4000条数据的HTML表格耗时20秒的问题？

• 算法复杂度冗余：手写冒泡排序本身是*O(n²)*复杂度，最后匹配目标行的while查找逻辑也是嵌套循环的O(n²)复杂度，纯计算耗时会随数据量平方级增长，4000条数据仅计算环节就会产生数百万次冗余遍历。
• 高频DOM操作触发反复重排：每匹配一行就调用一次insertBefore，4000条数据就要触发4000次DOM结构变动，浏览器每次变动都会触发页面回流重算，这是最核心的耗时来源——DOM操作的成本是纯JS内存操作的几十甚至上百倍。
• 重复DOM读取：循环匹配行的过程中，每次都要重新读取单元格innerHTML、做类型转换，反复访问DOM属性的操作会进一步叠加耗时。

核心思路：先脱离DOM完成纯内存计算排序，最后一次性批量更新DOM结构，把4000次零散DOM操作压缩为1次

function sorting(list) {
  // 第一步：仅一次遍历读取所有行的必要数据，全部存在纯JS内存对象中
  const rowCache = list.map(row => ({
    rowElement: row,
    sortValue: Date.parse(row.cells[1].innerHTML),
    rowId: parseInt(row.cells[12].innerHTML)
  }))

  // 第二步：用JS内置优化排序代替手写冒泡，纯内存计算无DOM交互
  rowCache.sort((a, b) => a.sortValue - b.sortValue)

  // 第三步：用文档碎片中转，批量完成行顺序调整
  const tbody = list[0].parentNode
  const fragment = document.createDocumentFragment()
  // 文档碎片的append操作不触发真实DOM重排
  rowCache.forEach(item => fragment.appendChild(item.rowElement))
  // 一次性将排序后的内容写回表格，仅触发1次DOM重排
  tbody.appendChild(fragment)
}

实现效果对比：原代码的20秒耗时里，90%以上来自反复触发的DOM重排，换成文档碎片批量更新的方式后，这部分耗时会被压缩到原来的几十分之一。

如果后续表格数据量会持续超过万级，前端优化的收益会触顶，更适合把排序逻辑前移到服务端，具体实现步骤：

• 替换全量加载逻辑：不要一次性把所有数据加载到前端，结合分页能力，每次仅加载当前页需要渲染的数据（比如每页20条）
• 交互参数传递：用户点击列表头触发排序时，前端向数据接口传递两个核心参数：需要排序的字段名、排序方向（升序/降序）
• 后端排序实现：在数据库查询阶段直接添加排序规则（比如SQL语句中的ORDER BY 字段名 ASC/DESC），从数据源层面返回排好序的分页数据，完全不需要前端在拿到数据后做顺序调整
• 前端渲染：拿到后端返回的有序数据集后，直接循环生成对应表格行插入即可，全程不需要做DOM行的移动调整。

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