快捷導(dǎo)航

AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議

更新時(shí)間：2015年12月28日 10:44:04 投稿：mrr

　AnglarJS作為一款優(yōu)秀的Web框架，可大大簡化前端開發(fā)的負(fù)擔(dān)。本文給大家介紹AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，涉及到angularjs性能調(diào)優(yōu)相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧

　AnglarJS作為一款優(yōu)秀的Web框架，可大大簡化前端開發(fā)的負(fù)擔(dān)。近日Sebastian Fröstl在一篇博文《AngularJS Performance Tuning for Long Lists》中表示AnglarJS在處理包含復(fù)雜數(shù)據(jù)結(jié)構(gòu)的大型列表時(shí)，其運(yùn)行速度會(huì)非常慢。他在文中同時(shí)分享了解決方案。下面為該文的譯文。

　　AnglarJS很棒，但當(dāng)處理包含復(fù)雜數(shù)據(jù)結(jié)構(gòu)的大型列表時(shí)，其運(yùn)行速度就會(huì)非常慢。這是我們將核心管理頁面遷移到AngularJS過程中遇到的問題。這些頁面在顯示500行數(shù)據(jù)時(shí)本應(yīng)該工作順暢，但首個(gè)方法的渲染時(shí)間竟花費(fèi)了7秒，太可怕了。

　　后來，我們發(fā)現(xiàn)了在實(shí)現(xiàn)過程中存在兩個(gè)主要性能問題。一個(gè)與“ng-repeat ”指令有關(guān)，另一個(gè)與過濾器有關(guān)。

　　下文將分享我們通過不同的方法解決性能問題的經(jīng)驗(yàn)，希望可以給你帶來啟示。

　　一、AngularJS 中的ng-repeat在處理大型列表時(shí)，速度為什么會(huì)變慢？

　　AngularJS中的ng-repeat在處理2500個(gè)以上的雙向數(shù)據(jù)綁定時(shí)速度會(huì)變慢。這是由于AngularJS通過“dirty checking”函數(shù)來檢測(cè)變化。每次檢測(cè)都會(huì)花費(fèi)時(shí)間，所以包含復(fù)雜數(shù)據(jù)結(jié)構(gòu)的大型列表將降低你應(yīng)用的運(yùn)行速度。

　　二、提高性能的先決條件

　　時(shí)間記錄指令

　　為了測(cè)量一個(gè)列表渲染所花費(fèi)的時(shí)間，我們寫了一個(gè)簡單的程序，通過使用“ng-repeat”的屬性“$last”來記錄時(shí)間。時(shí)間存放在TimeTracker服務(wù)中，這樣時(shí)間記錄就與服務(wù)器端的數(shù)據(jù)加載分開了。

　　// 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開發(fā)者工具的時(shí)間軸(Timeline)屬性

　　在Chrome開發(fā)者工具的時(shí)間軸標(biāo)簽中，你可以看見事件、每秒內(nèi)瀏覽器幀數(shù)和內(nèi)存分配。“memory”工具用來檢測(cè)內(nèi)存泄漏，及頁面所需的內(nèi) 存。當(dāng)幀速率每秒低于30幀時(shí)就會(huì)出現(xiàn)頁面閃爍問題。“frames”工具可幫助了解渲染性能，還可顯示出一個(gè)JavaScript任務(wù)所花費(fèi)的CPU時(shí) 間。

　　三、通過限制列表的大小進(jìn)行基本的調(diào)優(yōu)

　　緩解該問題，最好的辦法是限制所顯示列表的大小?？赏ㄟ^分頁、添加無限滾動(dòng)條來實(shí)現(xiàn)。

　　分頁

　　分頁，我們可以使用AngularJS的“l(fā)imitTo”過濾器(AngularJS1.1.4版本以后)和“startFrom”過濾器?？梢酝ㄟ^限制顯示列表的大小來減少渲染時(shí)間。這是減少渲染時(shí)間最高效的方法。

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

　　如果你不能/不想使用分頁，但過濾過程又很慢，這時(shí)一定要檢查前五步，并使用“ng-show”隱藏掉多余的列表元素。

　　無限滾動(dòng)條

　　如果你希望進(jìn)一步了解該方法，可訪問 http://binarymuse.github.io/ngInfiniteScroll/

　　四、七大調(diào)優(yōu)法則

　　1. 渲染沒有數(shù)據(jù)綁定的列表

　　這是最明顯的解決方案，因?yàn)閿?shù)據(jù)綁定是性能問題最可能的根源。如果你只想顯示一次列表，并不需要更新、改變數(shù)據(jù)，放棄數(shù)據(jù)綁定是絕佳的辦法。不過可惜的是，你會(huì)失去對(duì)數(shù)據(jù)的控制權(quán)，但除了該法，我們別無選擇。進(jìn)一步了解： https://github.com/Pasvaz/bindonce。

　　2.不要使用內(nèi)聯(lián)方法計(jì)算數(shù)據(jù)

　　為了在控制器中直接過濾列表，不要使用可獲得過濾鏈接的方法?！皀g-repeat”會(huì)評(píng)估每個(gè) [$digest(http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest)%5D表達(dá)式。在我們的案例中，“filteredItems()”返回過濾鏈接。如果評(píng)估過程很慢，它將迅速降低整個(gè)應(yīng)用的速度。

　　//這并不是一個(gè)好方法，因?yàn)橐l繁地評(píng)估。

　　//這是要采用的方法

　　3.使用兩個(gè)列表(一個(gè)用來進(jìn)行視圖顯示，一個(gè)作為數(shù)據(jù)源)

　　將要顯示的列表與總的數(shù)據(jù)列表分開，是非常有用的模型。你可以對(duì)一些過濾進(jìn)行預(yù)處理，并將存于緩存中的鏈接應(yīng)用到視圖上。下面案例展示了基本實(shí)現(xiàn)過程。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

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

　　如果你用指令、模板來渲染額外的信息，例如通過點(diǎn)擊來顯示列表項(xiàng)的詳細(xì)信息，一定要使用 ng-if(AngularJSv. 1.1.5以后)。ng-if可阻止渲染(與ng-show相比)。所以其它DOM和數(shù)據(jù)綁定可根據(jù)需要進(jìn)行評(píng)估。

以上內(nèi)容給大家詳解了AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，希望大家喜歡。

您可能感興趣的文章: