快捷導(dǎo)航

angularjs的一些優(yōu)化小技巧

更新時(shí)間：2014年12月06日 10:05:02 投稿：junjie

這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下

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

ng簡(jiǎn)介

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

ng的硬傷

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

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

tip1: 一次綁定

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

復(fù)制代碼代碼如下:

hello

new code

復(fù)制代碼代碼如下:

hello

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

...

...

$rootScope.$digest

...

...

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

復(fù)制代碼代碼如下:

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

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

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

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

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

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

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

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

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

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

復(fù)制代碼代碼如下:

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

總結(jié)

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

您可能感興趣的文章: