AngularJS项目中jQuery UI Selectable大数据表格卡顿问题求助

遇到50×50这类大表格使用jQuery UI Selectable时卡顿甚至假死，核心原因是Selectable默认会给每个可选中单元格绑定大量鼠标事件，2500个元素的事件监听会严重消耗浏览器资源，加上实时DOM样式更新触发的频繁重排重绘，最终导致性能崩盘。结合你的场景，我给你几个针对性的优化方案：

1. 优化jQuery UI Selectable的事件监听逻辑 #

默认情况下Selectable会遍历所有.ui-selectable-child元素并逐个绑定事件，我们可以修改配置，让事件监听只作用在表格容器上，同时简化选中判定逻辑：

// 初始化Selectable时调整核心配置
$('#my-table-1').selectable({
  filter: 'td', // 指定选中目标为表格单元格
  tolerance: 'touch', // 改用"接触即选中"的判定逻辑，比默认的"完全包含"计算量小
  // 延迟选中样式更新，避免拖动过程中频繁DOM操作
  start: function(event, ui) {
    $('td').removeClass('ui-selected'); // 清空历史选中状态
  },
  stop: function(event, ui) {
    // 鼠标释放后再批量更新选中样式
    $('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
  }
});

把选中样式的更新延迟到stop阶段，能避免拖动过程中频繁的DOM修改；tolerance: 'touch'也能减少选中判定时的计算开销。

2. 改用AngularJS原生方式生成表格（替代手动拼接HTML） #

你的代码里手动拼接HTML字符串，既不符合AngularJS的开发规范，也不利于性能优化。改用ng-repeat生成表格，Angular会帮你优化DOM渲染流程：

<!-- 在Angular模板中使用ng-repeat生成表格 -->
<table id="my-table-1" ng-init="rowCount=50; colCount=50">
  <tr ng-repeat="row in [] | range:rowCount">
    <td ng-repeat="col in [] | range:colCount"></td>
  </tr>
</table>

// 在Angular控制器中定义range过滤器，用于生成循环次数
app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i = 0; i < total; i++) {
      input.push(i);
    }
    return input;
  };
});

这种方式比手动拼接HTML更高效，Angular的编译机制会批量处理DOM元素，减少多次插入带来的性能损耗。

3. 优化手动DOM拼接的性能（如果必须保留原生写法） #

如果一定要用手动拼接的方式，不要依赖字符串拼接后插入，改用DocumentFragment一次性插入DOM，避免频繁触发重排：

var table = document.createElement('table');
table.id = 'my-table-1';
var fragment = document.createDocumentFragment();

for (var i = 0; i < 50; i++) {
  var tr = document.createElement('tr');
  for (var j = 0; j < 50; j++) {
    var td = document.createElement('td');
    tr.appendChild(td);
  }
  fragment.appendChild(tr);
}

table.appendChild(fragment);
$('#my-container').empty().append(table);

DocumentFragment是内存中的DOM片段，只有当它被插入到真实DOM中时才会触发渲染，能大幅减少重排次数。

4. 关闭不必要的实时交互样式 #

如果不需要实时预览选中区域，可以直接隐藏ui-selecting的临时样式，减少拖动过程中的重绘：

/* 禁用实时选中的临时样式，降低浏览器渲染压力 */
.ui-selecting {
  background: transparent !important;
}

这样拖动过程中浏览器不会频繁更新单元格背景色，能有效降低性能消耗。

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