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