Angular應用優化機理

要優化，就得搞清楚angular的運行機理。表面上看幾行代碼，就實現了數據的雙向綁定，這一實現內部歸功於angular的$digest循轉。

在angualr混入瀏覽器後，就有了一個angular上下文是運行在angular事件循環內的特定代碼。這個循環就是$digest循環，包含

$watch列表

對於$scope對象上的屬性在被視圖綁定時，就會在$watch列表中，添加一個$watch函數；這個函數有兩個必選參數和一個可選參數

• watchExpression 監測的對象

• listener/callback 變化時的回調

• obejctEquality 說明是否檢查嚴格相等

angular應用持續跟蹤當前監控的值，會遍歷$watch列表，若是值爲變化，會繼續監控；若是變化，會啓用新值，並再次運行這一$digest循環。

$evalAsync列表

$evalAsync()是一種在當前做用域上調度表達式在將來某個時刻運行的方式。不管什麼時候，只要你想要在一個行爲的執行上下文中的外部之行另外一個行爲，就可使用該函數。

最後說說$apply()函數

$apply()函數能夠從angular框架的外部讓表達式在angular的上下文中之行。

$scope.$apply('message="hi grils"');

$scope.$apply(function(){

 $scope.message='hi boy'

})

一般指令內部都會本身調用$apply(),可是對於第三方的框架，就須要藉助$apply來將值傳入angular上下文。以下例：

app.directive('mypicker',function(){

return function(scope,ele,attr,ctrl){

    $(function(){

        ele.datapicker({

             dateFormat:'mm/dd/yy',

             onSelect:function(){

                    $scope.apply(function(){

                                    ctrl.$setViewValue(date)    

                                })
                        }    
                })
        })
    }
})

datePicker插件暴露了一個onSelect事件，爲了在angular 拿到選擇的值，使用$apply()處理回調。

---

瞭解了$digest循環，咱們來講下優化

1. 減小$digest循環的數量，能夠對循環的數量優化，避免不要的循環

2. $watch的回調函數要能快速之行完成

3. 個$watch是一個監控器，對於不須要監控變化的數據，能夠去除監控器，能夠用使用bingonce只從模型到視圖一次綁定

4. 每一個過濾器在頁面上至少會被調用2次，減小過濾器。能夠對數據作預處理後再綁定到視圖

5. 可使用$templateCache優化模版加載。

總之想要一個高性能的應用，性能優化必須作，理解angular的內部機制，會幫助你事半功倍