如何在单个tbody标签中用ng-repeat处理10k条记录避免浏览器崩溃？

核心思路 #

别一次性把10k条数据全丢给ng-repeat，利用DataTable的分页、虚拟滚动特性，只渲染当前页面需要的数据集，大幅减少DOM节点数量和Angular的监听压力，避免浏览器崩溃。

具体实现方案 #

1. 初始化DataTable时配置分页/虚拟滚动 #

先给DataTable做基础配置，开启分页和滚动，控制每页渲染条数：

// 初始化DataTable
$('#yourTable').DataTable({
  paging: true, // 开启分页
  pageLength: 50, // 每页显示50条，可根据需求调整
  scrollY: '400px', // 虚拟滚动高度，超出后滚动加载当前页数据
  scrollCollapse: true,
  searching: true, // 保留搜索功能
  ordering: true // 保留排序功能
});

2. Angular控制器中维护当前页数据 #

在控制器里存全量数据和当前页数据，监听DataTable的分页事件，动态更新当前页数据集：

angular.module('yourApp').controller('TableCtrl', function($scope) {
  // 假设这是你的10k条原始数据
  $scope.allData = your10kRecords;
  $scope.currentPageData = [];

  // 绑定DataTable分页事件
  var table = $('#yourTable').DataTable();
  table.on('page.dt', function() {
    var info = table.page.info();
    // 计算当前页的起始/结束索引
    var start = info.start;
    var end = info.end;
    // 从全量数据中截取当前页数据
    $scope.currentPageData = $scope.allData.slice(start, end);
    // 手动触发Angular更新（DataTable事件不在Angular上下文）
    $scope.$apply();
  });

  // 初始化时加载第一页数据
  var initialInfo = table.page.info();
  $scope.currentPageData = $scope.allData.slice(initialInfo.start, initialInfo.end);
});

3. 单个tbody的HTML结构 #

保持单个tbody，ng-repeat只循环当前页的数据，加上track by优化渲染：

<table id="yourTable" class="display" width="100%">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <!-- 其他表头列 -->
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in currentPageData track by item.id">
      <td>{{item.column1}}</td>
      <td>{{item.column2}}</td>
      <!-- 其他数据列 -->
    </tr>
  </tbody>
</table>

4. 额外优化细节 #

• 用track by item.id（替换成你的数据唯一标识），避免Angular重复创建销毁DOM，提升渲染效率。
• 如果需要搜索/排序，监听DataTable的search.dt和order.dt事件，对全量数据做过滤/排序后，再更新当前页数据。
• 关闭Angular的debug模式，减少不必要的性能损耗。

方案有效性说明 #

每次ng-repeat仅渲染几十条数据，DOM节点从10k级降到几十级，彻底解决浏览器因DOM过载崩溃的问题；同时复用DataTable成熟的分页/滚动逻辑，不用自己造轮子，还保持了单个tbody的结构要求。

内容的提问来源于stack exchange，提问作者Syed Yahya Masood