AngularJS 整理一些最佳化的小技巧_AngularJS

關於最佳化ng的手段網上已經有很多了,核心都是從$$watchers這個範圍內部屬性說起的,今天我來說點別的,本質還是不變的,因為這是ng的硬傷,不過我相信只要運用合適的手法,這些問題還是可以避免的.

ng簡介

angularjs簡稱ng,是google出品的mvvm架構,此在提高前端項目開發效率(實踐中來看確實很能提高開發效率),以控制器,指令,服務來圍繞整個項目,內部以專屬的DI來解決三層之前的調用問題.更多的詳情資訊可以參考我之前寫的ng源碼分析.

ng的硬傷

說到硬傷就要先說下它的簡單的資料繫結原理

ng裡每個頁面上定義的model其實都會在當前範圍下添加一個監聽器,內部容器就是$$wachers數組,只要頁面任何一個model發生變化了,就會觸發範圍內部$digest方法,它會依次尋找當前範圍樹裡的所有model,是保證頁面上的模型能得到資料同步,所以這個是非常消耗程式時間的,官方的說法就是當頁面上出現2000個監聽器時,頁面效能就會明顯下降.所以要提高ng的效能,就要從這方面入手了.

tip1: 一次綁定

其實這個網上別人已經說過了,這裡說下新的用法,ng的1.3.0+的版本已經內建提供了一個文法來支援模型只綁定一次的情況,看下面的例子

old code

hello

new code

hello

 可以看到新的文法就是在model前面加上::,相信這個文法要比網上用的第三方外掛程式要方便的多了.

tip2: $scope.$digest vs $scope.$apply

相信很多人對$apply方法不陌生,它一般用在,當不在ng的環境裡執行代碼的時候,為了保證頁面的資料同步,在代碼執行完成之後調用$apply方法會觸發內部$digest來檢查範圍裡所有的模型,其實在它的內部是這樣調用的,下面唯寫出一些程式碼片段

......$rootScope.$digest......

 所有它其實是調用$rootScope根範圍下的$digest,那麼不同範圍下的$digest有什麼區別呢?其實最重要的區別就在於

$digest 只深度尋找調用方下面所有的模型

所以$scope跟$rootScope相比,要節省掉很多尋找模型的時間.

不過想要保證頁面上所有模型資料的同步,還是得調用$rootScope的,所以在寫代碼之前最好想想哪些資料是要同步變化的.

tip3: 儘可能少調用 ng-repeat

ng-repeat預設會建立很多監聽器,所以在資料量很大的時候,這個非常消耗頁面效能,我覺的只有在當需要經常更新資料列表的時候才需要用ng-repeat,要不然放那麼多的監聽器在那裡也是浪費,這時候可以用ng內建的$interpolate服務來解析一個程式碼片段,類似於一個靜態模板引擎,它的內部主要依賴ng核心解析服務$parse,然後把這些填充資料之後的程式碼片段直接賦給一個一次性的模型性就可以.

tip4: 盡量在指令裡寫原生文法

雖然ng提供了很多的指令比如ng-show,ng-hide,其實它們作用就是根據模型的true,false來顯示或隱藏一個程式碼片段,雖然能夠很快速的實現業務要求,但是這些指令還是預設會添加監聽器,假如這些程式碼片段存在於一個大的指令裡面時,更好的方法是在指令link裡編寫.show(), .hide()這些類似的jq方法來控制比較好,這樣可以節省監聽器的數量,類似的還有內建的事件指令,這些其實都可以在外圍指令裡通過使用addEventListener來綁定事件,反正在寫代碼之前,最好想想怎麼樣來使監聽器的數量最少,這樣才能全面的提高頁面效能.

tip5: 頁面內盡量少用filters

當在頁面內的模型後面增加filter時,這個會造成當前模型在$digest裡運行兩次,造成不必要的效能浪費.第一次在$$watchers檢測任務改變時;第二次發生在模型值修改時,所以盡量少用內聯時的過濾器文法,像下面這樣的非常影響頁面效能

推薦使用$filter服務來調用某個過濾器函數在後台,這樣能明顯的提高頁面效能,代碼如下

$filter('filter')(array, expression, comparator);

總結

上面都是些提高ng項目效能的一些小技巧,雖然ng很強大,但是不規範的代碼也會破壞它的效能,所以在寫代碼之前最好構思下哪些地方是不需要監聽器的.

以上就是對AngularJS 最佳化方面的資料整理後續繼續補充相關資料，謝謝大家對本站的支援！