1.更新UI的時間
angular進入臟檢查循環,等待所有的model都穩定后,才批量一次性更新UI,這種機制可以減少瀏覽器渲染的次數,從而提高性能。
2.優化$watch注冊的監視器
- 避免在監視函數中執行耗時操作,應為在每一次臟檢查循環中都會被調用
- 避免在監視函數中操作dom,console.log,因為它很耗時。
- 使用ng-if而不是ng-show,前者會移除DOM和對應的監視器
- 即時移除不必要的監視器,unwatch()
- 避免深度watch,即第三個參數為true
3.
digest
- $apply會進入臟檢查循環,并從根作用域開始遍歷(深度優先)檢查數據變更
-
digest可以稍微提升性能
4.優化ng-repeat
- 限制列表數量,使用分頁和無限滾動
- 使用track by,angular會根據對應的值判斷是否對原DOM進行更新,減少不必要的渲染
- 使用單次綁定,angular建議一個頁面最多2000個雙向綁定,使用單次綁定僅在第一次臟檢查循環的時候改變界面元素{{::variable}}
5.慎用filter
在臟檢查循環中,filter會調用多次,至少兩次,避免在filter中執行耗時操作
可以在controller中預先處理:
//mainCtrl.js
angular.module('filtersPerf', []).controller('mainCtrl', function($scope, $filter){
$scope.dataList = $filter('double')(dataFromServer);
});