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

ng簡(jiǎn)介

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

ng的硬傷

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

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

tip1: 一次綁定

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

old code

hello

new code

hello

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

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

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

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

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

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

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

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

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

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

tip4: 盡量在指令里寫(xiě)原生語(yǔ)法

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

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

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

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

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

總結(jié)

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

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