關(guān)于優(yōu)化ng的手段網(wǎng)上已經(jīng)有很多了,核心都是從$$watchers這個作用域內(nèi)部屬性說起的,今天我來說點別的,本質(zhì)還是不變的,因為這是ng的硬傷,不過我相信只要運用合適的手法,這些問題還是可以避免的.

ng簡介

angularjs簡稱ng,是google出品的mvvm框架,此在提高前端項目開發(fā)效率(實踐中來看確實很能提高開發(fā)效率),以控制器,指令,服務(wù)來圍繞整個項目,內(nèi)部以獨有的DI來解決三層之前的調(diào)用問題.更多的詳情信息可以參考我之前寫的ng源碼分析.

ng的硬傷

說到硬傷就要先說下它的簡單的數(shù)據(jù)綁定原理

ng里每個頁面上定義的model其實都會在當(dāng)前作用域下添加一個監(jiān)聽器,內(nèi)部容器就是$$wachers數(shù)組,只要頁面任何一個model發(fā)生變化了,就會觸發(fā)作用域內(nèi)部$digest方法,它會依次查找當(dāng)前作用域樹里的所有model,是保證頁面上的模型能得到數(shù)據(jù)同步,所以這個是非常消耗程序時間的,官方的說法就是當(dāng)頁面上出現(xiàn)2000個監(jiān)聽器時,頁面性能就會明顯下降.所以要提高ng的性能,就要從這方面入手了.

tip1: 一次綁定

其實這個網(wǎng)上別人已經(jīng)說過了,這里說下新的用法,ng的1.3.0+的版本已經(jīng)內(nèi)置提供了一個語法來支持模型只綁定一次的情況,看下面的例子

old code

hello

new code

hello

 可以看到新的語法就是在model前面加上::,相信這個語法要比網(wǎng)上用的第三方插件要方便的多了.

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

相信很多人對$apply方法不陌生,它一般用在,當(dāng)不在ng的環(huán)境里執(zhí)行代碼的時候,為了保證頁面的數(shù)據(jù)同步,在代碼執(zhí)行完成之后調(diào)用$apply方法會觸發(fā)內(nèi)部$digest來檢查作用域里所有的模型,其實在它的內(nèi)部是這樣調(diào)用的,下面只寫出一些代碼片段

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

 所有它其實是調(diào)用$rootScope根作用域下的$digest,那么不同作用域下的$digest有什么區(qū)別呢?其實最重要的區(qū)別就在于

$digest 只深度查找調(diào)用方下面所有的模型

所以$scope跟$rootScope相比,要節(jié)省掉很多查找模型的時間.

不過想要保證頁面上所有模型數(shù)據(jù)的同步,還是得調(diào)用$rootScope的,所以在寫代碼之前最好想想哪些數(shù)據(jù)是要同步變化的.

tip3: 盡可能少調(diào)用 ng-repeat

ng-repeat默認(rèn)會創(chuàng)建很多監(jiān)聽器,所以在數(shù)據(jù)量很大的時候,這個非常消耗頁面性能,我覺的只有在當(dāng)需要經(jīng)常更新數(shù)據(jù)列表的時候才需要用ng-repeat,要不然放那么多的監(jiān)聽器在那里也是浪費,這時候可以用ng自帶的$interpolate服務(wù)來解析一個代碼片段,類似于一個靜態(tài)模板引擎,它的內(nèi)部主要依賴ng核心解析服務(wù)$parse,然后把這些填充數(shù)據(jù)之后的代碼片段直接賦給一個一次性的模型性就可以.

tip4: 盡量在指令里寫原生語法

雖然ng提供了很多的指令比如ng-show,ng-hide,其實它們作用就是根據(jù)模型的true,false來顯示或隱藏一個代碼片段,雖然能夠很快速的實現(xiàn)業(yè)務(wù)要求,但是這些指令還是默認(rèn)會添加監(jiān)聽器,假如這些代碼片段存在于一個大的指令里面時,更好的方法是在指令link里編寫.show(), .hide()這些類似的jq方法來控制比較好,這樣可以節(jié)省監(jiān)聽器的數(shù)量,類似的還有自帶的事件指令,這些其實都可以在外圍指令里通過使用addEventListener來綁定事件,反正在寫代碼之前,最好想想怎么樣來使監(jiān)聽器的數(shù)量最少,這樣才能全面的提高頁面性能.

tip5: 頁面內(nèi)盡量少用filters

當(dāng)在頁面內(nèi)的模型后面增加filter時,這個會造成當(dāng)前模型在$digest里運行兩次,造成不必要的性能浪費.第一次在$$watchers檢測任務(wù)改變時;第二次發(fā)生在模型值修改時,所以盡量少用內(nèi)聯(lián)時的過濾器語法,像下面這樣的非常影響頁面性能

推薦使用$filter服務(wù)來調(diào)用某個過濾器函數(shù)在后臺,這樣能明顯的提高頁面性能,代碼如下

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

總結(jié)

上面都是些提高ng項目性能的一些小技巧,雖然ng很強(qiáng)大,但是不規(guī)范的代碼也會破壞它的性能,所以在寫代碼之前最好構(gòu)思下哪些地方是不需要監(jiān)聽器的.

以上就是對AngularJS 優(yōu)化方面的資料整理后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對本站的支持！

最新評論