如何加速AngularJS应用程序？
我有一个带有分页网格的AngularJS应用程序（两个嵌套的ng-repeat）。 一页有大约25x40的输入元素。 在发布1000次绑定的开始时，分页性能可以接受。
但随后页面的复杂度增加：动态类，不同的上下文菜单，网格中每个单元的条件内容。 估计有6000个绑定（每个输入元素有6个），分页变得不稳定。
我的问题是：我通常如何处理AngularJS中的性能问题？ 明显的第一步是衡量。 但Chrome Profiler的结果并没有告诉我那么多，远不知如何继续。
Self Total Function
-----------------------------------------------------------------
24 ms 2.79 s angular.js:7997 Scope.$digest
1 ms 1 ms controllers.js:365 setViewportData
16 ms 692 ms angular.js:13968 ngRepeatWatch
8 ms 22 ms angular.js:6439 extend.literal
9 ms 1.22 s angular.js:14268 ngSwitchWatchAction
16 ms 45 ms angular.js:12436 ngModelWatch
0 621 ms angular-ui-4.0.js:264 initDateWidget
0 13 ms angular.js:12859 ngClassWatchAction
0 70 ms angular.js:14184 ngStyleWatchAction
1 ms 5 ms angular-ui-4.0.js:261 getOptions
0 16 ms angular.js:579 copy
0 1 ms angular.js:4558 interpolateFnWatchAction
1 ms 2 ms angular.js:5981 token.fn.extend.assign
0 37 ms angular.js:8151 Scope.$eval
1 ms 1 ms angular.js:6137 extend.constant
14 ms 16 ms angular.js:651 equals
1 ms 1 ms angular.js:4939 $interpolate.fn
另外：有没有可能'Object.observe（）'将来会加快速度（忽略'initDateWidget'，这显然是一个不同的话题）？
你可以做的事情会最快加速你的Angular应用程序，就是在你可以的地方减少绑定。 做到这一点的一种方法是创建一个指令，使用DOM操作为您创建表格，而不是使用ng-repeats。 这将减少您必须处理的整体手表数量，并使该消化速度快得多。
我知道这样做很丑陋，但Angular并不打算设置3000多个绑定。 既然它做了一个摘要，它不是一个观察者模式，它确实减慢了许多设置的东西。
你甚至可以做一个混合的方法，在那里你仍然使用ng-repeat，但是所有的值都放在DOM中，通过一个自定义指令直接进行DOM操作，从而避免了所有的绑定。
如果您还没有这样做，请安装AngularJS Chrome插件Batarang，它可以帮助您确定哪些绑定会导致您的悲伤。 https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
正如其他答案所示，您要查找的内容可能是您桌子上无限滚动设置的小例子，您绑定的模型是您在屏幕上显示的子集。
ng-grid组件实现了这一点，可能值得一看，直接使用它或窃取技术。 http://angular-ui.github.com/ng-grid/
资源
这篇关于大型列表上的angularJS性能的文章很好地概述了您在性能调优方面的选项。
以上答案（除了Batarang插件）也在其中提及。 这只是该文中提示的概述。
使用limitTo减少数据（分页）
更明显的解决方案之一是通过减少视图中项目的数量来减少绑定的数量。 可以使用ng-repeat上的limitTo过滤器完成数据分页。
示例如何通过巨大数据集（angular.js）提高ngRepeat的性能？ 该文章还有一个jsbin示例链接。
此外，请确保不要使用内联方法提供数据，因为这将在每个$摘要中进行评估。
<li ng-repeat="item in filteredItems()"> // Bad idea, since very often evaluated.
<li ng-repeat="item in items"> // Way to go!
使用bindonce删除绑定
另一个明显的解决方案是删除特定元素的绑定。 当然，这意味着更新将不再反映在视图中。
绑定解决方案不仅仅是去除双向绑定。 基本上它会在绑定被移除之前等待绑定的值。 最好为自己阅读。 有关详细信息，请检查bindonce项目。
在上面列出的文章中，还有关于使用2个列表的模式的信息。 一个用于可视化，另一个用作数据源。
使用ng-grid
Ng-grid的优点是它只呈现当前可见的元素。 请阅读http://angular-ui.github.io/ng-grid/。
类似的ng-if完全从DOM树中移除隐藏元素，而ng-show只保留它们，但隐藏。 考虑到ng-if会再次显示原始文件（原始文件是关键字，而不是更改）元素的副本。
过滤提示
该文章还提供了一些过滤列表的很好的提示。
就像使用ng-show隐藏已过滤的元素一样，因为这种方式不需要为数据创建子列表。
另一种技术被称为“反弹用户输入”。 最后一个选项是等待过滤，直到用户停止输入。 包括一个jsfiddle例子。
更多
链接的文章中可以找到更多提示。 这里列出的资源也应该是一个很好的起点。 我相信这里列出了最明显的特点和快速胜利。
另一个很好的写法是数据绑定如何在AngularJS中工作？
链接地址: http://www.djcxy.com/p/23127.html