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

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

 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. 渲染没有数据绑定的列表

  这是最明显的解决方案,因为数据绑定是性能问题最可能的根源。如果你只想显示一次列表,并不需要更新、改变数据,放弃数据绑定是绝佳的办法。不过可惜的是,你会失去对数据的控制权,但除了该法,我们别无选择。进一步了解:

  2.不要使用内联方法计算数据

  为了在控制器中直接过滤列表,不要使用可获得过滤链接的方法。“ng-repeat”会评估每个
[$digest(

  //这并不是一个好方法,因为要频繁地评估。

  //这是要采用的方法

  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个建议,希望大家喜欢。

您可能感兴趣的文章:

  • AngularJS实现表单验证
  • jQuery和AngularJS的区别浅析
  • AngularJS中的模块详解
  • Angularjs制作简单的路由功能demo
  • AngularJS的内置过滤器详解
  • AngularJS学习笔记之基本指令(init、repeat)
  • 使用AngularJS来实现HTML页面嵌套的方法
  • 在AngularJS中使用AJAX的方法
  • angularjs客户端实现压缩图片文件并上传实例

AnglarJS作为一款优秀的Web框架,可大大简化前端开发的负担。近日Sebastian
Frstl在一篇博文《…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图