1.更新UI的時(shí)間
angular進(jìn)入臟檢查循環(huán)亿胸,等待所有的model都穩(wěn)定后,才批量一次性更新UI预皇,這種機(jī)制可以減少瀏覽器渲染的次數(shù)侈玄,從而提高性能。
2.優(yōu)化$watch注冊(cè)的監(jiān)視器
- 避免在監(jiān)視函數(shù)中執(zhí)行耗時(shí)操作吟温,應(yīng)為在每一次臟檢查循環(huán)中都會(huì)被調(diào)用
- 避免在監(jiān)視函數(shù)中操作dom序仙,console.log,因?yàn)樗芎臅r(shí)。
- 使用ng-if而不是ng-show鲁豪,前者會(huì)移除DOM和對(duì)應(yīng)的監(jiān)視器
- 即時(shí)移除不必要的監(jiān)視器潘悼,unwatch()
- 避免深度watch,即第三個(gè)參數(shù)為true
3.
digest
- $apply會(huì)進(jìn)入臟檢查循環(huán)爬橡,并從根作用域開(kāi)始遍歷(深度優(yōu)先)檢查數(shù)據(jù)變更
-
digest可以稍微提升性能
4.優(yōu)化ng-repeat
- 限制列表數(shù)量,使用分頁(yè)和無(wú)限滾動(dòng)
- 使用track by糙申,angular會(huì)根據(jù)對(duì)應(yīng)的值判斷是否對(duì)原DOM進(jìn)行更新宾添,減少不必要的渲染
- 使用單次綁定,angular建議一個(gè)頁(yè)面最多2000個(gè)雙向綁定,使用單次綁定僅在第一次臟檢查循環(huán)的時(shí)候改變界面元素{{::variable}}
5.慎用filter
在臟檢查循環(huán)中缕陕,filter會(huì)調(diào)用多次粱锐,至少兩次,避免在filter中執(zhí)行耗時(shí)操作
可以在controller中預(yù)先處理:
//mainCtrl.js
angular.module('filtersPerf', []).controller('mainCtrl', function($scope, $filter){
$scope.dataList = $filter('double')(dataFromServer);
});