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

**摘要:

**AnglarJS

是一款非常棒的Web框架,但其在处理包含复杂数据结构的大型列表时,会出现运行速度慢的情况。遇到此种情况,该如何解决?该文给出了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服务中,这样时间记录就与服务器端的数据加载分开了。

**[js]**
 [view plain](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)[copy](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)

// 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”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。

**[js]**
 [view plain](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)[copy](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)

// 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  
  

如果你不能/不想使用分页,但过滤过程又很慢,这时一定要检查前五步,并使用“ng-show”隐藏掉多余的列表元素。

无限滚动条

如果你希望进一步了解该方法,可访问“ http://binarymuse.github.io/ngInfiniteScroll/”,

七大调优法则

1.渲染没有数据绑定的列表

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

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

为了在控制器中直接过滤列表,不要使用可获得过滤链接的方法。“ng-repeat”会评估每个 [$digest(http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest)%5D表达式。在我们的案例中,“filteredItems()”返回过滤链接。如果评估过程很慢,它将迅速降低整个应用的速度。

**[js]** 
[view plain](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)[copy](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)

  • //这并不是一个好方法,因为要频繁地评估。
  • //这是要采用的方法
  • 3.使用两个列表(一个用来进行视图显示,一个作为数据源)

    将要显示的列表与总的数据列表分开,是非常有用的模型。你可以对一些过滤进行预处理,并将存于缓存中的链接应用到视图上。下面案例展示了基本实现过程。filteredLists变量保存着缓存中的链接,applyFilter方法来处理映射。

    [js] view plaincopy

    /* 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 */  
      
    
    • {{item.name}}
    4.在其他模板中使用ng-if来代替ng-show

    如果你用指令、模板来渲染额外的信息,例如通过点击来显示列表项的详细信息,一定要使用 ng-if(AngularJSv. 1.1.5以后)。ng-if可阻止渲染(与ng-show相比)。所以其它DOM和数据绑定可根据需要进行评估。

    [js] view plaincopy

  • {{ item.title }}

  • 5.不要使用ng-mouseenter、ng-mouseleave等指令

    使用内部指令,像ng-mouseenter,AngularJS会使你的页面闪烁。浏览器的帧速率通常低于每秒30帧。使用jQuery创建动画、鼠标悬浮效果可以解决该问题。确保将鼠标事件放入jQuery的.live()函数中。

    6.关于过滤的小提示:通过ng-show隐藏多余的元素

    对于长列表,使用过滤同样会减低工作效率,因为每个过滤都会创建一个原始列表的子链接。在很多情况下,数据没有变化,过滤结果也会保持不变。所以对数据列表进行预过滤,并根据情况将它应用到视图中,会大大节约处理时间。
    在ng-repeat指令中使用过滤器,每个过滤器会返回一个原始链接的子集。AngularJS 从DOM中移除多余元素(通过调用 $destroy),同时也会从$scope中移除他们。当过滤器的输入发生改变时,子集也会随着变化,元素必须进行重新链接,或着再调用$destroy。
    大部分情况下,这样做很好,但一旦用户经常过滤,或者列表非常巨大,不断的链接与销毁将影响性能。为了加快过滤的速度,你可以使用ng-show和ng-hide指令。在控制器中,进行过滤,并为每项添加一个属性。依靠该属性来触发ng-show。结果是,只为这些元素增加ng-hide类,来代替将它们移除子列表、$scope和DOM。

    触发ng-show的方法之一是使用表达式语法。ng-show的值由表达式语法来确定。可以看下面的例子:
    [html] view plaincopy

      
    
  • {{item.name}}
  • ``` 另一个方法是为ng-show传递一个属性,并在单独的子控制器进行计算。该方法稍有点复杂,但却是更明晰的方法。 ######**7.关于过滤的小提示:防抖动输入** 解决第6点提出的持续过滤问题的另一个方法是防抖动用户输入。例如,如果用户输入一个搜索关键词,只当用户停止输入后,过滤器才会被激活。使用该防抖动服务的一个很好的解决方案请见:[http://jsfiddle.net/Warspawn/6K7Kd/](http://jsfiddle.net/Warspawn/6K7Kd/)。将它应用到你的视图及控制器中,如下所示。 **[js]** [view plain](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)[copy](http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list#)

    /* Controller */
    // Watch the queryInput and debounce the filtering by 350 ms.
    $scope.$watch('queryInput', function(newValue, oldValue) {
    if (newValue === oldValue) { return; }
    $debounce(applyQuery, 350);
    });
    var applyQuery = function() {
    $scope.filter.query = $scope.query;
    };

    /* View */

  • {{ item.title }}
  • 你可能感兴趣的:(对AngularJS进行性能调优的7个建议)