与7K行的表角VS重复性能问题

Question

我使用的角度VS-重复呈现在表格7K左右行。如果我使用VS重复的表身，呈现非常缓慢。

<table class="table">
  <tbody vs-repeat style="width: 100%;">
    <tr ng-repeat="row in list track by $index">
      <td>{{::row[listColumns[0].colName]}}</td>
      <td>{{::row[listColumns[1].colName]}}</td>
      <td>{{::row[listColumns[2].colName]}}</td>
      <td>{{::row[listColumns[3].colName]}}</td>
      <td>{{::row[listColumns[4].colName]}}</td>
    </tr>
  </tbody>

如果我使用VS重复不表，在我来说，我使用的div。它的渲染速度非常快

<div vs-repeat class="table-body">
  <div class="row" ng-repeat="row in list track by $index">
    <div class="col-md-4">{{::row[listColumns[0].colName]}}</div>
    <div class="col-md-2">{{::row[listColumns[1].colName]}}</div>
    <div class="col-md-2">{{::row[listColumns[2].colName]}}</div>
    <div class="col-md-2">{{::row[listColumns[3].colName]}}</div>
    <div class="col-md-2">{{::row[listColumns[4].colName]}}</div>
  </div>
</div>

请建议如何提高性能表？

Answer 1

随着呈现许多DOM元素，甚至里面的物品ng-repeat可以呛你的应用程序的最小处理项目的巨大集合。

DOM related solutions是检查是否元素在视图不会告诉你，如果嵌套组件已加载并完全呈现，并可能导致错误。

我的对这个问题的解决方案是角度的limitTo : limit: begin滤波器，具有iScroll或天然scrollTop和scrollBottom回调，根据浏览方向，其提高或降低在控制器中的begin索引一起 - 前端分页的排序，其中仅项的具体数目是在显示该DOM。

<tr ng-repeat="item in items | limitTo : 100 : 600 track by $index">
    <span>{{ item.property }}</span>
</tr>

然后你就可以发现，制定出最适合应用的最佳limitTo数 - 同时保持它的光，快速和灵活的角度应该是。

Answer 2

使用纳克重复上小组的阵列组成。进行分页或延迟加载。数据存储到临时数组要显示有相当7K上记录正重复。思考？谢谢！