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

Question

我看到使用 socket.io 和 ng-repeat angular 指令时出现一些性能问题，我从后端接收大量数据，这会降低应用程序的速度，因此在接收数据时我无法点击任何东西。使用 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 指令解决性能问题？

How to resolve performance issue using ng-repeat directive?

javascript

performance

angularjs

ng-repeat