如何使用ng-repeat指令解决性能问题

Question

我发现使用套接字有一些性能问题。IO与ng-repeat角指令，我正在接收大量的数据从后端减慢应用程序，所以在接收数据时，我将无法点击任何东西。使用ng-repeat处理大列表的最佳方法是什么?假设每分钟有1000条消息?

ctrl.js

  $scope.event = [];
  socket.on('ditConsumer', function(data) {
              var obj = {
                  file: $scope.filename,
                  data: data
              }
              $scope.event.push(data);
          }

main.html

<ul style="list-style: none;">
    <li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>

Answer 1

首先在ng-repeat="message in event track by $index"中使用某种消息id，而不是在每个ng-repeat摘要中呈现的$index。见http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

second -您可以使用limitTo过滤器限制可视项目:

ng-repeat="message in event track by message.id | limitTo:100"

隐藏项仍然可以被其他过滤器搜索和恢复，但不会呈现在HTML