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 = [ { id：1， cardNo：“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/

用于创建表格渲染的嵌套ng-repeat非常慢

1 个答案: