angularjs - 如何加速 AngularJS 应用程序？

Question

我有一个带有分页网格的 AngularJS 应用程序(两个嵌套的 ng-repeat)。一页大约有 25x40 个输入元素。刚开始进行1000次绑定(bind)时，分页性能尚可。

但是页面的复杂性随之增加:动态类、不同的上下文菜单、网格每个单元格的条件内容。估计有 6000 个绑定(bind)(每个输入元素 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”，这显然是一个不同的主题)？

Answer 1

要最大程度地加快 Angular 应用程序的速度，您可以做的就是尽可能减少这些绑定(bind)。一种方法是创建一个指令，通过 DOM 操作而不是使用 ng-repeats 来为您构建表格。这将减少您必须处理的总体 watch 数量，并使 $digest 更快。

我知道这样做很丑陋，但 Angular 并不是真的要设置 3000 多个绑定(bind)。由于它进行摘要并且不是观察者模式，因此设置了这么多，它确实会减慢速度。

您甚至可以采用混合方法，仍然使用 ng-repeat，但所有值都通过自定义指令直接 DOM 操作放置在 DOM 中，从而避免了所有绑定(bind)。