一些優化angularjs的小技巧

關于優化<code>ng</code>的手段網上已經有很多了,核心都是從<code>$$watchers</code>這個作用域内部屬性說起的,今天我來說點别的,本質還是不變的,因為這是<code>ng</code>的硬傷,不過我相信隻要運用合适的手法,這些問題還是可以避免的.

<code>angularjs</code>簡稱<code>ng</code>,是<code>google</code>出品的<code>mvvm</code>架構,此在提高前端項目開發效率(實踐中來看确實很能提高開發效率),以控制器,指令,服務來圍繞整個項目,内部以獨有的<code>di</code>來解決三層之前的調用問題.更多的詳情資訊可以參考我之前寫的<code>ng</code>源碼分析.

說到硬傷就要先說下它的簡單的資料綁定原理

<code>ng</code>裡每個頁面上定義的<code>model</code>其實都會在目前作用域下添加一個監聽器,内部容器就是<code>$$wachers</code>數組,隻要頁面任何一個<code>model</code>發生變化了,就會觸發作用域内部<code>$digest</code>方法,它會依次查找目前作用域樹裡的所有<code>model</code>,是保證頁面上的模型能得到資料同步,是以這個是非常消耗程式時間的,官方的說法就是當頁面上出現<code>2000</code>個監聽器時,頁面性能就會明顯下降.是以要提高<code>ng</code>的性能,就要從這方面入手了.

其實這個網上别人已經說過了,這裡說下新的用法,<code>ng</code>的<code>1.3.0+</code>的版本已經内置提供了一個文法來支援模型隻綁定一次的情況,看下面的例子

old code

new code

可以看到新的文法就是在<code>model</code>前面加上<code>::</code>,相信這個文法要比網上用的第三方插件要友善的多了.

相信很多人對<code>$apply</code>方法不陌生,它一般用在,當不在<code>ng</code>的環境裡執行代碼的時候,為了保證頁面的資料同步,在代碼執行完成之後調用<code>$apply</code>方法會觸發内部<code>$digest</code>來檢查作用域裡所有的模型,其實在它的内部是這樣調用的,下面隻寫出一些代碼片段

所有它其實是調用<code>$rootscope</code>根作用域下的<code>$digest</code>,那麼不同作用域下的<code>$digest</code>有什麼差別呢?其實最重要的差別就在于

<code>$digest</code> 隻深度查找調用方下面所有的模型

是以<code>$scope</code>跟<code>$rootscope</code>相比,要節省掉很多查找模型的時間.

不過想要保證頁面上所有模型資料的同步,還是得調用<code>$rootscope</code>的,是以在寫代碼之前最好想想哪些資料是要同步變化的.

<code>ng-repeat</code>預設會建立很多監聽器,是以在資料量很大的時候,這個非常消耗頁面性能,我覺的隻有在當需要經常更新資料清單的時候才需要用<code>ng-repeat</code>,要不然放那麼多的監聽器在那裡也是浪費,這時候可以用<code>ng</code>自帶的<code>$interpolate</code>服務來解析一個代碼片段,類似于一個靜态模闆引擎,它的内部主要依賴<code>ng</code>核心解析服務<code>$parse</code>,然後把這些填充資料之後的代碼片段直接賦給一個一次性的模型性就可以.

雖然<code>ng</code>提供了很多的指令比如<code>ng-show</code>,<code>ng-hide</code>,其實它們作用就是根據模型的<code>true,false</code>來顯示或隐藏一個代碼片段,雖然能夠很快速的實作業務要求,但是這些指令還是預設會添加監聽器,假如這些代碼片段存在于一個大的指令裡面時,更好的方法是在指令<code>link</code>裡編寫<code>.show(), .hide()</code>這些類似的<code>jq</code>方法來控制比較好,這樣可以節省監聽器的數量,類似的還有自帶的事件指令,這些其實都可以在外圍指令裡通過使用<code>addeventlistener</code>來綁定事件,反正在寫代碼之前,最好想想怎麼樣來使監聽器的數量最少,這樣才能全面的提高頁面性能.

當在頁面内的模型後面增加<code>filter</code>時,這個會造成目前模型在<code>$digest</code>裡運作兩次,造成不必要的性能浪費.第一次在<code>$$watchers</code>檢測任務改變時;第二次發生在模型值修改時,是以盡量少用内聯時的過濾器文法,像下面這樣的非常影響頁面性能

推薦使用<code>$filter</code>服務來調用某個過濾器函數在背景,這樣能明顯的提高頁面性能,代碼如下

上面都是些提高<code>ng</code>項目性能的一些小技巧,雖然<code>ng</code>很強大,但是不規範的代碼也會破壞它的性能,是以在寫代碼之前最好構思下哪些地方是不需要監聽器的.