Sortablejs在Chrome中处理2000条记录大表格时卡顿问题求助

问题 #

当表格包含2000+条记录时，使用SortableJS实现跨表格拖拽排序会导致Chrome浏览器严重卡顿，甚至触发“页面无响应”提示，无法满足客户使用的体验要求。

核心原因 #

SortableJS默认会对每一行元素绑定拖拽相关事件，且在拖拽过程中实时进行DOM位置调整、样式计算等操作。当元素数量达到数千级时，大量的DOM操作和事件监听会阻塞浏览器主线程，引发性能瓶颈。

优化方案 #

1. 基础性能优化（快速生效） #

通过调整SortableJS配置，减少不必要的计算和渲染开销：

• 关闭动画：动画效果在大量元素场景下会大幅增加渲染负担
• 延迟拖拽触发：避免误触的同时减少无效事件触发
• 使用幽灵元素占位：拖拽时仅显示占位元素，减少真实DOM的移动操作

2. 进阶优化：虚拟滚动（根治性能问题） #

如果基础优化仍无法满足需求，推荐使用虚拟滚动方案，仅渲染当前可视区域内的行，将DOM元素数量控制在几十条以内，从根源上解决大量DOM元素导致的性能问题。

优化后代码示例 #

JavaScript 代码 #

var left = document.getElementById("left");
var right = document.getElementById("right");

generateTable(2000, left)
generateTable(10, right)

function generateTable(nOfRows, wrap) {
  var newTable = document.createElement("table"),
      tBody = newTable.createTBody(),
      nOfColumns = 5,
      row = generateRow(nOfColumns);

  tBody.classList.add("sortable");
  
  for (var i = 0; i < nOfRows; i++) {
    tBody.appendChild(row.cloneNode(true));
  }

  (wrap.hasChildNodes() ? wrap.replaceChild : wrap.appendChild).call(wrap, newTable, wrap.children[0]);
}

function generateRow(n) {
  var row = document.createElement("tr"),
      text = document.createTextNode("cell");

  for (var i = 0; i < n; i++) {
    row.insertCell().appendChild(text.cloneNode(true));
  }

  return row.cloneNode(true);
}

// 优化后的Sortable配置
Sortable.create(document.getElementsByClassName('sortable')[0], {
  items: "tr",
  group: '1',
  animation: 0, // 关闭动画提升性能
  delay: 150, // 延迟触发拖拽，减少误触与无效计算
  ghostClass: 'sortable-ghost', // 拖拽时显示幽灵占位元素
  chosenClass: 'sortable-chosen'
});

Sortable.create(document.getElementsByClassName('sortable')[1], {
  items: "tr",
  group: '1',
  animation: 0,
  delay: 150,
  ghostClass: 'sortable-ghost'
});

HTML 代码 #

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.10.0-rc3/Sortable.min.js"></script>

<style>
/* 自定义幽灵元素样式，保证拖拽时的视觉反馈 */
.sortable-ghost {
  opacity: 0.4;
  background-color: #f0f0f0;
}
.sortable-chosen {
  cursor: move;
}
</style>

<div id="left"></div>
<div id="right"></div>

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