資源描述：
《angularjs進(jìn)行性能調(diào)優(yōu)的7個(gè)建議_angularjs》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議AnglarJS作為一款優(yōu)秀的Web框架，可大大簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。近日SebastianFr6sll在一篇博文《AngularJSPerformaneeTuningforLongLists》中表示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ì)非常慢。這是我們將核心管理頁(yè)面遷移到AngularJS過(guò)程中遇到的問(wèn)題。這
2、些頁(yè)面在顯示500行數(shù)據(jù)吋木應(yīng)該工作順暢，但首個(gè)方法的渲染吋間竟花費(fèi)了7秒，太可怕了。后來(lái)，我們發(fā)現(xiàn)了在實(shí)現(xiàn)過(guò)程中存在兩個(gè)主要性能問(wèn)題。一個(gè)與“ng-repeat”指令冇關(guān)，另一個(gè)與過(guò)濾器冇關(guān)。一下文將分享我們通過(guò)不同的方法解決性能問(wèn)題的經(jīng)驗(yàn)，希望可以給你帶來(lái)啟力￡o一、AngularJS中的ng-repeat在處理人型列表時(shí)，速度為什么會(huì)變慢？AngularJS中的ng-rcpcat在處理2500個(gè)以上的雙向數(shù)據(jù)綁定時(shí)速度會(huì)變慢。這是由于AngularJS通過(guò)“dirtychecking”函數(shù)來(lái)檢
3、測(cè)變化。每次檢測(cè)都會(huì)花費(fèi)時(shí)間，所以包含復(fù)雜數(shù)據(jù)結(jié)構(gòu)的大型列表將降低你應(yīng)用的運(yùn)行速度。二、提高性能的先決條件時(shí)間記錄指令為了測(cè)量一個(gè)列表渲染所花費(fèi)的時(shí)間，我們寫了一個(gè)簡(jiǎn)單的程序，通過(guò)使用“ng-repeat”的屬性“$last”來(lái)記錄時(shí)間。時(shí)間存放在TimeTracker服務(wù)中,這樣時(shí)間記錄就與服務(wù)器端的數(shù)據(jù)加載分開了。//Postrepeatdirectiveforloggingtherenderingtimeangular?module('siApp?services5)?directive('p
4、ostRepeatDirective，,f$timcout，,'$log','TimeTracker',function($timeout,$log,TimeTracker){returnfunction(scope,element,attrs){if(scope.$last){$timeout(function(){vartimeFinishedLoadingList二TimeTracker.reviewListLoaded();varref=newDate(timeFinishedLoading
5、List);varend=newDcite();$log.debug(〃##DOMrenderinglisttook:"+(end-ref)+"ms〃);});}};}]);//UseinHTML:???Chrome開發(fā)者工具的時(shí)間軸(Timeline)屬性在Chrome開發(fā)者工具的時(shí)間軸標(biāo)簽屮，你可以看見事件、每秒內(nèi)瀏覽器幀數(shù)和內(nèi)存分配。“memory”工具用來(lái)檢測(cè)內(nèi)存泄漏，及頁(yè)面所需的內(nèi)存。當(dāng)幀速率每秒低于30幀時(shí)就會(huì)出現(xiàn)頁(yè)面閃爍問(wèn)題?！癴rames”工具可幫助了解渲染性能，還可顯示出一個(gè)Jav
6、aScript任務(wù)所花費(fèi)的CPU吋間。三、通過(guò)限制列表的人小進(jìn)行基本的調(diào)優(yōu)緩解該問(wèn)題，最好的辦法是限制所顯示列表的大小?？赏ㄟ^(guò)分頁(yè)、添加無(wú)限滾動(dòng)條來(lái)實(shí)現(xiàn)。分頁(yè)分頁(yè)，我們可以使用AngularJS的"limitTo”過(guò)濾器(AngularJSl.1.4版本以后)和“startFrom”過(guò)濾器?？梢酝ㄟ^(guò)限制顯示列表的大小來(lái)減少渲染時(shí)間。這是減少淚染時(shí)間最高效的方法。//Paginationincontroller$scope.currentPage=0;$scope.pageSize=75;$scope
7、.numberOfPages=function(){returnMath,ceil($scope.displayedltemsList.length/$scope.pageSize);};//Startfromfi1terangular.module('app').fi1ter('startFrom，,function(){rcturnfunction(input,start){returninput.slicc(start);};//UseinHTML//Paginationbuttons{{$i
8、ndex+1}}如果你不能/不想使用分頁(yè)，但過(guò)濾過(guò)程乂很慢，這時(shí)一定要檢查前五步，并使用“ng-show”隱藏掉多余的列表元素。無(wú)限滾動(dòng)條如果你希望進(jìn)一步了解該方法，可訪問(wèn)http://binarymuse?github?io/nglnfiniteScroll/四、七大調(diào)優(yōu)法則1.渲染沒有數(shù)據(jù)綁定的列表這是最明顯的解決方案，因?yàn)閿?shù)據(jù)綁定是性能問(wèn)題最可能的根源。如果你只想顯示一次列表，并不需耍更新、改變數(shù)據(jù)，放棄數(shù)據(jù)綁定是絕佳的辦法。不過(guò)可惜的是，你會(huì)失去對(duì)數(shù)據(jù)的控制權(quán)
