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(timeFinished LoadingList); 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.Size); ; // 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”隱藏掉多餘的列表元素。
無限滾動條
如果你希望進一步了解該方法，可訪問 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()」會返回過濾連結。如果評估過程很慢，它將迅速降低整個應用的速度。
//這並不是一個好方法，因為要頻繁地評估。
//這是要採用的方法
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 */ } } 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個建議，希望大家喜歡。
