AngularJS 性能優化二三事 【已翻譯100%】

在過去的兩年中，angularjs 的使用率有了很大的提升。簡單的雙向綁定是促使其流行的主要原因之一，但與此同時，它導緻了在一個應用中出現了大量的 watcher。在背景，angularjs 會執行所謂的 “髒值檢查”。之是以要做髒值檢查目的是為了檢查在 “scope” 中的資料是否發生了變化;架構必須周期性的檢測資料是否發生了變化… 髒值檢查會每 40ms 更新一次.. 想想看.. 如果它需要檢查超多資料的時候; crap!!

讓我們來看看如何改善 angularjs 的性能..

減少 watcher 數量

可能很多人都會抱怨 angular js 應用的性能; 特别是當他們用了 ng-repeat 的時候;為什麼會這樣？ watcher 應該是這背後的主要原因。一個 angular 指令會産生一個 watcher (比如 ng-src;ng-href;)

下面的例子很詳細的解釋了這種情況

<a href="http://plnkr.co/edit/jwrhvb?p=preview">http://plnkr.co/edit/jwrhvb?p=preview</a>

看看上面的例子，你加載的資料越多; 産生的 watchers 就越多;

解決方案

通過使用 bindonce 指令來避免使用雙向綁定; 當你不需要雙向綁定的時候，試試看用 bindonce 指令，比如 bo-if; bo-show; 看看下面這個精簡過 watcher 數量的例子

<a href="http://plnkr.co/edit/0dgork?p=preview">http://plnkr.co/edit/0dgork?p=preview</a>

文檔和源碼放在這裡

<a href="https://github.com/pasvaz/bindonce">https://github.com/pasvaz/bindonce</a>

延遲加載 angular controller

在初始化的時候加載控制器對小應用來說很合适；但是如果應用的 scope 很大怎麼辦？

如果我們在特定頁面初始化的時候，把控制器動态的加載到我們的 dom 上會怎樣? 很贊，對不對？

如果這些控制器是在特定頁面加載之後，動态的加載到 dom 上的話; 不單應用的初始化會很快; 而且也會降低在 dom 中生成的對象數量;

下面例子是如何動态加載控制器到 dom

<a href="https://github.com/ifyio/angularjs-lazy-loading-with-requirejs">https://github.com/ifyio/angularjs-lazy-loading-with-requirejs</a>

删除那些不在你 viewport 中的，多餘的 html 對象

對于不定長清單最常見的問題…. 尤其是在用 ng-repeat 的時候; 就是你必須把所有資料都加載進來，即使你隻需要顯示其中一部分資料; 每次重複會生成至少同樣數量的 watcher;

是以為什麼不隻加載顯示所必要的那部分資料呢。是不是很 crazyyyyyyyyyy？試試這個

<a href="https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/readme.md">https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/readme.md</a>

這個指令隻加載那些在 viewport 中的對象，并清除那些看不到的;

這不僅僅削減了watcher數量，同時也降低了浏覽器中 dom 的大小。是不是超酷？

你覺得呢？告訴我呗。