如何加速AngularJS应用程序？

发布时间：2020-12-17 08:28:27 所属栏目：安全来源：网络整理

导读：我有一个AngularJS应用程序与分页网格(两个嵌套ng重复)。一页大约有25×40个输入元素。在开始1000个绑定，寻呼性能是可以接受的。但随后页面的复杂性增长：动态类，变化的上下文menue，条件内容为网格的每个单元格。并且估计有6000个绑定(每个输入元素6个)

我有一个AngularJS应用程序与分页网格(两个嵌套ng重复)。一页大约有25×40个输入元素。在开始1000个绑定，寻呼性能是可以接受的。

但随后页面的复杂性增长：动态类，变化的上下文menue，条件内容为网格的每个单元格。并且估计有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

Aside：有没有任何机会，“Object.observe()”会加快事情在未来(忽略’initDateWidget’，这显然是一个不同的主题)？

你可以做的事情，将加速你的Angular应用程序最多是减少这些绑定在哪里你可以。执行此操作的一种方法是创建一个使用DOM操作构建表的指令，而不是使用ng-repeats。这将减少您必须处理的整体手表的数量，并使得$ digest更快。

我知道这是丑陋的，但Angular不是真的要设置3000绑定。因为它做了一个摘要，它不是一个观察者模式，它真的减慢了很多设置的事情。

你甚至可以做一个混合方法，你仍然使用ng-repeat，但是所有的值都放在DOM中，直接从一个自定义指令DOM操作，从而避免了所有的绑定。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!