anglarjs作为一款优秀的web框架，可大大简化前端开发的负担。近日sebastian fröstl在一篇博文《angularjs performance tuning for long lists》中表示anglarjs在处理包含复杂数据结构的大型列表时，其运行速度会非常慢。他在文中同时分享了解决方案。下面为该文的译文。
anglarjs很棒，但当处理包含复杂数据结构的大型列表时，其运行速度就会非常慢。这是我们将核心管理页面迁移到angularjs过程中遇到的问题。这些页面在显示500行数据时本应该工作顺畅，但首个方法的渲染时间竟花费了7秒，太可怕了。
后来，我们发现了在实现过程中存在两个主要性能问题。一个与“ng-repeat ”指令有关，另一个与过滤器有关。
下文将分享我们通过不同的方法解决性能问题的经验，希望可以给你带来启示。
一、angularjs 中的ng-repeat在处理大型列表时，速度为什么会变慢？
angularjs中的ng-repeat在处理2500个以上的双向数据绑定时速度会变慢。这是由于angularjs通过“dirty checking”函数来检测变化。每次检测都会花费时间，所以包含复杂数据结构的大型列表将降低你应用的运行速度。
二、提高性能的先决条件
时间记录指令
为了测量一个列表渲染所花费的时间，我们写了一个简单的程序，通过使用“ng-repeat”的属性“$last”来记录时间。时间存放在timetracker服务中，这样时间记录就与服务器端的数据加载分开了。
// post repeat directive for logging the rendering time angular.module('siapp.services').directive('postrepeatdirective', ['$timeout', '$log', 'timetracker', function($timeout, $log, timetracker) { return function(scope, element, attrs) { if (scope.$last){ $timeout(function(){ var timefinishedloadinglist = timetracker.reviewlistloaded(); var ref = new date(timefinishedloadinglist); var end = new date(); $log.debug("## dom rendering list took: " + (end - ref) + " ms"); }); } }; } ]); // use in html: …
chrome开发者工具的时间轴(timeline)属性
在chrome开发者工具的时间轴标签中，你可以看见事件、每秒内浏览器帧数和内存分配。“memory”工具用来检测内存泄漏，及页面所需的内 存。当帧速率每秒低于30帧时就会出现页面闪烁问题。“frames”工具可帮助了解渲染性能，还可显示出一个javascript任务所花费的cpu时 间。
三、通过限制列表的大小进行基本的调优
缓解该问题，最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现。
分页
分页，我们可以使用angularjs的“limitto”过滤器(angularjs1.1.4版本以后)和“startfrom”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。
// pagination in controller $scope.currentpage = 0; $scope.pagesize = 75; $scope.numberofpages = function() { return math.ceil($scope.displayeditemslist.length/ $scope.pagesize); }; // start from filter angular.module('app').filter('startfrom', function() { return function(input, start) { return input.slice(start); }; // use in html // pagination buttons{{$index + 1}}
如果你不能/不想使用分页，但过滤过程又很慢，这时一定要检查前五步，并使用“ng-show”隐藏掉多余的列表元素。
无限滚动条
如果你希望进一步了解该方法，可访问
四、七大调优法则
1. 渲染没有数据绑定的列表
这是最明显的解决方案，因为数据绑定是性能问题最可能的根源。如果你只想显示一次列表，并不需要更新、改变数据，放弃数据绑定是绝佳的办法。不过可惜的是，你会失去对数据的控制权，但除了该法，我们别无选择。进一步了解： https://github.com/pasvaz/bindonce。
2.不要使用内联方法计算数据
为了在控制器中直接过滤列表，不要使用可获得过滤链接的方法。“ng-repeat”会评估每个 [$digest(表达式。在我们的案例中，“filtereditems()”返回过滤链接。如果评估过程很慢，它将迅速降低整个应用的速度。
//这并不是一个好方法，因为要频繁地评估。
//这是要采用的方法
3.使用两个列表(一个用来进行视图显示，一个作为数据源)
将要显示的列表与总的数据列表分开，是非常有用的模型。你可以对一些过滤进行预处理，并将存于缓存中的链接应用到视图上。下面案例展示了基本实现过程。filteredlists变量保存着缓存中的链接，applyfilter方法来处理映射。
/* controller */ // basic list var items = [{name:"john", active:true }, {name:"adam"}, {name:"chris"}, {name:"heather"}]; // init displayedlist $scope.displayeditems = items; // filter cache var filteredlists['active'] = $filter('filter)(items, {"active" : true}); // apply the filter $scope.applyfilter = function(type) { if (filteredlists.hasownproperty(type){ // check if filter is cached $scope.displayeditems = filteredlists[type]; } else { /* non cached filtering */ } } // reset filter $scope.resetfilter = function() { $scope.displayeditems = items; } /* view */select active
{{item.name}}
4.在其他模板中使用ng-if来代替ng-show
如果你用指令、模板来渲染额外的信息，例如通过点击来显示列表项的详细信息，一定要使用 ng-if(angularjsv. 1.1.5以后)。ng-if可阻止渲染(与ng-show相比)。所以其它dom和数据绑定可根据需要进行评估。
以上内容给大家详解了angularjs进行性能调优的7个建议，希望大家喜欢。
如对本文有疑问， 点击进行留言回复！！
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
我要评论
网友评论