嵌套 ng-repeat 用于创建表 <TD> 渲染非常缓慢

Question

我是 AngularJS 的新手。我的动态 UI（html 表格）如下所示。

ID | Name | CardNo |26 |27 |28 | 29 | 30 | 31 | 1 | 2 |3 | 11 |12...........|25   

1     A        001           p    p    P    p   p   P           p

我的 Json 格式看起来像

var empAttendance = [ { 编号：1， 卡号：“001”， 名称：“A”， 出席人数：[ { "id": 1, "day": 28 }, { "id": 2, "day": 29}, { "id": 3, "day": 30 }, { "id": 4, "day": 31 }, { "id": 5, "day": 2 }, { "id": 5, "day": 12 } ] }];

dtRange = [26,27,28,29,30,31,1,2,3....................... ....25];

查看（html）：

<table>
  <thead>
    <tr>
      <th>ID</th> 
      <th>CardNo</th>
      <th>Name</th>
      th data-ng-repeat="dt in vm.dtRange">{{dt}}</th>                                     
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="p in vm.employeeAtt">
        <td>{{p.id}}</td>
        <td>{{p.cardNo}}</td>
        <td>{{p.name}}</td>
        <td data-ng-repeat="dt in vm.dtRange">
          <span data-ng-repeat="att in p.attendance" ng-if="dt == att.day">P</span>
        </td>
     </tr>
   </tbody>
</table>

看来，一名员工在日期范围内（列标题）有很多出勤率。我尝试根据日期值和匹配列标题将“P”放入 td 单元格。我不需要任何分页，并将加载所有过滤的员工列表相关的考勤。

但是，上述逻辑按预期工作。但是“渲染非常非常慢。甚至我评论了内线'P'。

我的最少员工人数是 500 人，最多 3000 人。我还尝试了缓存数据并确保渲染缓慢。我确实在 ng-repeat 中加入了限制。但仍然没有显着的性能变化。

任何想法都会对我很有帮助。我正在使用 Angularjs 1.5.0

谢谢

Answer 1

这是 Angular 和大型数据集的常见问题。不幸的是，您无法做很多事情来改变这种行为，但如果您愿意放弃某些功能，您可以加快速度。

真正的问题是所有这些数据都被绑定了。此表格是否需要实时更新？还是你只显示它？如果您有 500 名员工，并且您的日期范围是 30 天，那么已经有 15,000 名观察者了！另外，您正在使用<span> 标签添加更多观察者。最重要的是，您正在执行条件评估！

我建议静态显示这些数据。这是一个很好的库： https://github.com/Pasvaz/bindonce

如果您不需要观察者，它允许您放弃观察者并仍然使用 ng-repeat 方法显示您的数据。

如果您绝对必须绑定数据，因为您正在进行实时更新或其他操作，那么您真的应该考虑对结果进行分页。这将大大减少观察者的数量。

这里是调整页面性能的另一个重要资源。 https://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/