我有一个带有分页网格的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旁白:“initDateWidget()”有没有可能在未来加快速度(忽略'Object.observe()‘,这显然是另一个话题)?
发布于 2013-03-30 05:35:12
如果你还没有这样做,请安装AngularJS浏览器插件Batarang,它将帮助你精确定位哪些绑定导致了你的悲痛。https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
正如另一个答案所暗示的,您正在寻找的可能是表格的无限滚动设置的一个小例子,其中您绑定到的模型是您在屏幕上显示的子集。
ng-grid组件实现了这一点,可能值得一看,要么直接使用它,要么窃取这项技术。http://angular-ui.github.com/ng-grid/
https://stackoverflow.com/questions/15643467
复制相似问题