關於優化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很強大,但是不規範的代碼也會破壞它的性能,所以在寫代碼之前最好構思下哪些地方是不需要監聽器的.