Question

我看到使用带有ng-repeat angular指令的socket.io的一些性能问题，我从后端接收了大量数据，这会减慢应用程序的速度，因此在接收数据时我将无法点击任何内容。使用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/

秒 - 您可以使用limitTo过滤器限制可视项目：

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

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

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

1 个答案: