angularjs进行性能调优的7个建议_angularjs

《angularjs进行性能调优的7个建议_angularjs》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、AngularJS进行性能调优的7个建议AnglarJS作为一款优秀的Web框架，可大大简化前端开发的负担。近日SebastianFr6sll在一篇博文《AngularJSPerformaneeTuningforLongLists》中表示AnglarJS在处理包含复杂数据结构的大型列表时，其运行速度会非常慢。他在文小同时分享了解决方案。下而为该文的译文。AnglarJS很棒，但当处理包含复杂数据结构的大型列表时，其运行速度就会非常慢。这是我们将核心管理页面迁移到AngularJS过程中遇到的问题。这

2、些页面在显示500行数据吋木应该工作顺畅，但首个方法的渲染吋间竟花费了7秒，太可怕了。后來，我们发现了在实现过程中存在两个主要性能问题。一个与“ng-repeat”指令冇关，另一个与过滤器冇关。一下文将分享我们通过不同的方法解决性能问题的经验，希望可以给你带來启力£o一、AngularJS中的ng-repeat在处理人型列表时，速度为什么会变慢？AngularJS中的ng-rcpcat在处理2500个以上的双向数据绑定时速度会变慢。这是由于AngularJS通过“dirtychecking”函数来检

3、测变化。每次检测都会花费时间，所以包含复杂数据结构的大型列表将降低你应用的运行速度。二、提高性能的先决条件时间记录指令为了测量一个列表渲染所花费的时间，我们写了一个简单的程序，通过使用“ng-repeat”的属性“$last”来记录时间。时间存放在TimeTracker服务中,这样时间记录就与服务器端的数据加载分开了。//Postrepeatdirectiveforloggingtherenderingtimeangular・module('siApp・services5)・directive('p

4、ostRepeatDirective，,f$timcout，,'$log','TimeTracker',function($timeout,$log,TimeTracker){returnfunction(scope,element,attrs){if(scope.$last){$timeout(function(){vartimeFinishedLoadingList二TimeTracker.reviewListLoaded();varref=newDate(timeFinishedLoading

5、List);varend=newDcite();$log.debug(〃##DOMrenderinglisttook:"+(end-ref)+"ms〃);});}};}]);//UseinHTML:・・・Chrome开发者工具的时间轴(Timeline)属性在Chrome开发者工具的时间轴标签屮，你可以看见事件、每秒内浏览器帧数和内存分配。“memory”工具用来检测内存泄漏，及页面所需的内存。当帧速率每秒低于30帧时就会出现页面闪烁问题。“frames”工具可帮助了解渲染性能，还可显示出一个Jav

6、aScript任务所花费的CPU吋间。三、通过限制列表的人小进行基本的调优缓解该问题，最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现。分页分页，我们可以使用AngularJS的"limitTo”过滤器(AngularJSl.1.4版本以后)和“startFrom”过滤器。可以通过限制显示列表的大小來减少渲染时间。这是减少泪染时间最高效的方法。//Paginationincontroller$scope.currentPage=0;$scope.pageSize=75;$scope

7、.numberOfPages=function(){returnMath,ceil($scope.displayedltemsList.length/$scope.pageSize);};//Startfromfi1terangular.module('app').fi1ter('startFrom，,function(){rcturnfunction(input,start){returninput.slicc(start);};//UseinHTML//Paginationbuttons{{$i

8、ndex+1}}如果你不能/不想使用分页，但过滤过程乂很慢，这时一定要检查前五步，并使用“ng-show”隐藏掉多余的列表元素。无限滚动条如果你希望进一步了解该方法，可访问http://binarymuse・github・io/nglnfiniteScroll/四、七大调优法则1.渲染没有数据绑定的列表这是最明显的解决方案，因为数据绑定是性能问题最可能的根源。如果你只想显示一次列表，并不需耍更新、改变数据，放弃数据绑定是绝佳的办法。不过可惜的是，你会失去对数据的控制权