javascript - 当 DOM 中的元素太多时，Angular ng 类性能问题

Question

我一直在处理一个导致性能问题的复杂 Angular 页面。为了突出这个问题，我创建了一个 fiddle http://jsfiddle.net/4ex2xgL1/3/在这里。

本质上，性能问题是由 ng-class 语句引起的，其中包含一个函数。

<span class="done-{{todo.done}}" ng-class="myfunction()">{{todo.text}}</span>

跨度在 ng-repeat 中。在运行 fiddle 时，可以看到当页面加载时 ng-class 被执行了几次，并且在每个键上它被调用的次数与 TODO 列表中的项目数一样多。

这是一个简单得多的案例，在我的案例中，我的页面上有 780 个项目，该函数最终被评估了大约 3000 次!

我们看到的解决方案之一是分解作用域，但这几乎会导致我的应用程序重写。

我们也尝试了 https://github.com/Pasvaz/bindonce但它似乎不适用于高度动态的内容。

有什么想法吗？

Answer 1

我用 https://github.com/JimLiu/angular-ui-tree 建了一棵树有将近 500 个项目要渲染，有很多听众。渲染需要 5 秒。 Bindonce 不会在那里工作。

唯一的解决办法是让 ng-repeat 做的更少。通过分页、搜索或其他任何方式保持列表较小。据我所知，这是最好的镜头。

这是我的建议

1. 在复选框上使用 ng-change 来操作 dom 或任何东西，而不是使用 ng-class，它将大大提高你的性能。

   <li ng-repeat="todo in todos track by todo.id"> <input type="checkbox" ng-model="todo.done" ng-change="myfunction()"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li>

   http://jsfiddle.net/4ex2xgL1/3/

2. 如果您有 ID，请在 ng-repeat 中使用 track by，更多信息请参见此处 http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

3. 不要在列表中显示 780 个项目。使用搜索框显示大约 100 或 50 个，或者你知道得更多

4. quick-ng-repeat 还没用，试试看https://github.com/allaud/quick-ng-repeat

终于好几个了http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/