对AngularJS进行性能调优的7个建议_angular js 为什么加载了20条带下拉的数据就很卡-CSDN博客

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: 
       
        <tr ng-repeat= 
        "item in items"  
        post-repeat-directive>…</tr>

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 
       
        <button ng-repeat= 
        "i in getNumber(numberOfPages()) track by $index"  
        ng-click= 
        "setCurrentPage($index)" 
        >{{$index + 1}}</button 
       
        // Displayed list 
       
        <tr ng-repeat= 
        "item in displayedItemsList | startFrom: currentPage * pageSize  | limitTo:pageSize"  
        /tr>

如果你不能/不想使用分页，但过滤过程又很慢，这时一定要检查前五步，并使用“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()”返回过滤链接。如果评估过程很慢，它将迅速降低整个应用的速度。

 
        <li ng-repeat= 
        "item in filteredItems()" 
        > 
        //这并不是一个好方法，因为要频繁地评估。 
       
        <li ng-repeat= 
        "item in items" 
        > 
        //这是要采用的方法

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 */ 
       
        <button ng-click="applyFilter(' 
        active')">Select active</button> 
       
        <ul><li ng-repeat= 
        "item in displayedItems" 
        >{{item.name}}<li></ul>

4.在其他模板中使用ng-if来代替ng-show

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

 
        <li ng-repeat= 
        "item in items" 
        > 
       
        <p> {{ item.title }} </p> 
       
        <button ng-click= 
        "item.showDetails = !item.showDetails" 
        >Show details</buttons> 
       
        <div ng- 
        if 
        = 
        "item.showDetails" 
        > 
       
        {{item.details}} 
       
        </div> 
       
        </li>

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的值由表达式语法来确定。可以看下面的例子：

 
     
          < 
          input  
          ng-model 
          = 
          "query" 
          ></ 
          input 
          > 
         
 
          < 
          li  
          ng-repeat 
          = 
          "item in items"  
          ng-show 
          = 
          "([item.name] | filter:query).length" 
          >{{item.name}}</ 
          li 
          >< 
          span  
          style 
          = 
          "font-size: 14px; line-height: 24px; font-family: Helvetica, ​Tahoma, ​Arial, ​sans-serif; white-space: normal;" 
          ></ 
          span 
          > 
         
 
   

另一个方法是为ng-show传递一个属性，并在单独的子控制器进行计算。该方法稍有点复杂，但却是更明晰的方法。

7.关于过滤的小提示：防抖动输入

解决第6点提出的持续过滤问题的另一个方法是防抖动用户输入。例如，如果用户输入一个搜索关键词，只当用户停止输入后，过滤器才会被激活。使用该防抖动服务的一个很好的解决方案请见：http://jsfiddle.net/Warspawn/6K7Kd/。将它应用到你的视图及控制器中，如下所示。

 
        /* 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 */ 
       
        <input ng-model= 
        "queryInput" 
        /> 
       
        <li ng-repeat= item  
        in  
        items | filter:filter.query>{{ item.title }} </li>