這篇文章主要介紹了AngularJS框架使用過程當(dāng)中的一些性能優(yōu)化要點(diǎn),Angular通常被用來制作大型單頁應(yīng)用,因而性能問題也是必須考慮的因素,需要的朋友可以參考下

1. 簡介

無論你正在編寫一個(gè)舊的應(yīng)用程序還是在一個(gè)大型應(yīng)用中采用AngularJS，性能是一個(gè)重要的方面。了解是什么原因?qū)е翧ngularJS應(yīng)用程序慢下來非常重要，要知道，在開發(fā)過程中做出權(quán)衡是很重要的。本文將介紹一些AngularJS比較常見的性能問題，以及優(yōu)化的建議。

2. 性能測(cè)試工具

本文采用jsPerf http://jsperf.com/ 性能測(cè)試的基準(zhǔn)。

3. 軟件性能

評(píng)價(jià)軟件性能有兩個(gè)基本的因素：

首先是算法的時(shí)間復(fù)雜度。一個(gè)簡單的例子就是線性搜索和二分檢索有著非常顯著的性能差距。

第二個(gè)軟件緩慢的原因被稱為空間復(fù)雜度。這是一臺(tái)電腦需要多少“空間”或內(nèi)存運(yùn)行你的應(yīng)用程序。內(nèi)存需求越多，運(yùn)行速度就越慢。

4 Javascript的性能

有些性能問題不僅僅是Angular帶來的，而是JavaScript本來就有的。

4.1 循環(huán)

避免在循環(huán)內(nèi)部調(diào)用函數(shù)，可以移到外部調(diào)用。

var sum = 0;

for(var x = 0; x < 100; x++){

 var keys = Object.keys(obj);

 sum = sum + keys[x];

}

上面的方面明顯沒有下面的快：

var sum = 0;

var keys = Object.keys(obj);

for(var x = 0; x < 100; x++){

 sum = sum + keys[x];

}

4.2 DOM訪問

在獲取DOM元素時(shí)要注意

angular.element('div.elementClass')

這種方式是非常昂貴的。其實(shí)這在AngularJS中并不會(huì)引起太大的問題。但是留意一下是有好處的。DOM樹要小，DOM的訪問要盡可能的少。

4.3 變量作用范圍垃圾回收

把你的變量作用范圍限制地越緊密越好，這樣垃圾回收器就可以更快地回收空間。注意下面的問題：

function demo(){

 var b = {childFunction: function(){

  console.log('hi this is the child function')

 };

 b.childFunction();

 return b;

}

當(dāng)這個(gè)函數(shù)終上了，這里就沒有到b的引用。b就會(huì)被回收了。但是如果有這樣一行：

var cFunc = demo();

這個(gè)引用就會(huì)阻止垃圾回收。要盡量避免這類引用。

4.4 數(shù)組和對(duì)象

這里有很多點(diǎn)：

比如：

for (var x=0; x<arr.length; x++) {

 i = arr[x].index;

}

比這一種快一點(diǎn)(注* arr為數(shù)組， obj為json對(duì)象)

for (var x=0; x<100; x++) {

 i = obj[x].index;

}

比這一種更快一點(diǎn)

var keys = Object.keys(obj);

for (var x = 0; x < keys.length; x++){

 i = obj[keys[x]].index;

}

5 重要的概念

我們已經(jīng)討論過有關(guān)JavaScript的性能，現(xiàn)在有必要看一看AngualrJS中的核心概念，看看它究竟是怎么運(yùn)作的。

5.1 域（Scopes）和更新周期（Digest Cycle）

Angular的域本質(zhì)上是一些JavaScript對(duì)象，它們從一些預(yù)定義的對(duì)象繼承而來?；旧?，小的域比大的域運(yùn)行要快。

換句話說，每創(chuàng)建一個(gè)新的域，都會(huì)給垃圾回收器添加更多待回收的內(nèi)容。

在寫AngularJS應(yīng)用中尤其要注意的一個(gè)核心概念和性能影響方面是更新周期（Digest Cycle）。實(shí)際上每一個(gè)域都會(huì)存放一個(gè)由方法組成的數(shù)組 $$watchers。

每當(dāng)域中的一個(gè)值（屬性）或綁定的DOM，如 ng-repeat，ng-switch 和 ng-if 等等，調(diào)用 $watch 時(shí)，一個(gè)函數(shù)(function)就會(huì)添加到相對(duì)應(yīng)域中的$$watchers數(shù)組隊(duì)列中。

當(dāng)域中的值發(fā)生改變時(shí)，在$$watchers中所有的watchers函數(shù)都會(huì)被觸發(fā)調(diào)用。并且當(dāng)它們的任何一個(gè)修改了域中的某個(gè)值時(shí)，它們會(huì)被再次觸發(fā)執(zhí)行。

這個(gè)過程會(huì)一直循環(huán)下去直到$$watcher數(shù)組隊(duì)列中不再做任何更改或拋出異常為止。

更外如果任何代碼執(zhí)行$scope.$apply()，都會(huì)觸發(fā)更新周期。

最后一點(diǎn)是 $scope.evalAsync() 會(huì)在一個(gè)異步調(diào)用中執(zhí)行，并且在當(dāng)前和下個(gè)執(zhí)行周期中，不會(huì)調(diào)用其的更新周期。

6. 在設(shè)計(jì)Angular時(shí)應(yīng)該遵守的一般準(zhǔn)則

6.1 大型對(duì)象和服務(wù)器調(diào)用

所以這些都告訴了我們什么？首先我們要盡可能地簡化我們的對(duì)象。當(dāng)對(duì)象是從服務(wù)器返回時(shí)，這一點(diǎn)尤為重要。

直接將數(shù)據(jù)庫中的一行轉(zhuǎn)換成對(duì)象只是臨時(shí)性方案，因此不要使用.toJson().

只需要把Angular需要的屬性值返回回來。

6.2 監(jiān)視函數(shù)（Watching Functions）

另一個(gè)常見的問題是為觀察者綁定的函數(shù)。不要將任何東西（ng-show, ng-repeat等等）直接綁定到一個(gè)函數(shù)。不要直接監(jiān)視任何函數(shù)的返回值。該函數(shù)會(huì)在每個(gè)更新周期都執(zhí)行，可能會(huì)降低你應(yīng)用的速度。

6.3 監(jiān)視對(duì)象(Watching Objects)

同樣，Angular提供了第三個(gè)可選參數(shù)來監(jiān)視整個(gè)對(duì)象的改動(dòng)。將調(diào)用$watch的第三個(gè)參數(shù)設(shè)為true。這是一個(gè)非?？膳碌南敕?。一個(gè)更好的解決辦法是依靠服務(wù)和對(duì)象的引用，監(jiān)視域之間的變化。

7 列表問題

7.1 長列表（Lists）

盡一些可能避免長列表。ng-repeat會(huì)進(jìn)行了一些很重的DOM操作（更不用說對(duì)$$watchers的污染），所以無論是在分頁或是在無限滾動(dòng)中，盡量使用小型數(shù)據(jù)進(jìn)行渲染。

7.2 過濾器(Filters)

要盡量避免使用過濾器。他們會(huì)在每個(gè)更新周期運(yùn)行兩次，每當(dāng)發(fā)生任何改變時(shí)運(yùn)行一次，另一次是收集更深層次的改變時(shí)觸發(fā)。所以不要直接從內(nèi)部列表中移除對(duì)象，使用CSS控制即可。（注* 用添加CSS類名去隱掉他們）

渲染時(shí)的 $index 值并不是真正的數(shù)組索引值，它豪無價(jià)值。但是排好序的數(shù)組索引，無法讓你遍歷到所有列表中的域。

7.3 更新 ng-repeat

當(dāng)使用ng-repeat時(shí)要盡量避免對(duì)全局列表的刷新。ng-repeat會(huì)產(chǎn)生一個(gè)$$hashkey屬性和一系統(tǒng)唯一的項(xiàng)。這意味著當(dāng)你調(diào)用 scope.listBoundToNgRepeat = serverFetch() 時(shí)會(huì)引起對(duì)整個(gè)列表的重新刷新。會(huì)通知執(zhí)行所有的watchers并觸發(fā)每一個(gè)元素，這是非常消耗性能的。

這里有兩種解決方案。一種是維護(hù)兩個(gè)集合，和帶有過慮器(filter)的ng-repeat(基本上需要自定義同步邏輯，因此算法更復(fù)雜，可維護(hù)性更差)，另一種方案是使用track by去指定你自己的key(Angular 1.2 開始支持，只需要很少的同步邏輯)。

總之：

scope.arr = mockServerFetch();

會(huì)比下面的這種慢

var a = mockServerFetch();

for(var i = scope.arr.length - 1; i >=0; i--){

 var result = _.find(a, function(r){

 return (r && r.trackingKey == scope.arr[i].trackingKey);

 });

 if (!result){

 scope.arr.splice(i, 1);

 } else {

 a.splice(a.indexOf(scope.arr[i]), 1);

 } 

}

_.map(a, function(newItem){

 scope.arr.push(newItem);

});

這種

<div ng-repeat="a in arr track by a.trackingKey">

比上面的慢些

<div ng-repeat="a in arr">

8 渲染問題

另一個(gè)引起Angular應(yīng)用慢的原因是不正確地使用 ng-hide/ ng-show 或 ng-switch。

ng-hide 和 ng-show 簡單地對(duì)CSS display屬性進(jìn)行切換。這意味著表面上看不見的東西其實(shí)還存在于域中， 所有的$$watchers還是會(huì)被觸發(fā)。

ng-if 和 ng-switch實(shí)際上從DOM中完全移除了，相應(yīng)的域也會(huì)被移除。性能差異顯而易見。

9. 更新周期問題

9.1 綁定

盡量減少你的綁定。在Angular 1.3中這里有一個(gè)新的一次綁定語法，{{::scopeValue}}。它只會(huì)被域執(zhí)行一次，并不添加到監(jiān)視器要監(jiān)視列表中（watcher array）.

9.2 $digest() 和 $apply()

scope.$apply 是一個(gè)強(qiáng)大的工具，可以讓你向Angular引入外部的值。本質(zhì)上它會(huì)觸發(fā)Angular的所有事件（例如ng-click）。問題是scope.$apply會(huì)從根域$rootScope開始，遍歷所有的域鏈，觸發(fā)每一個(gè)域。

scope.$digest只會(huì)執(zhí)行指定域及其相關(guān)的域。兩種性能差異不言自明。折中的方案是，不觸發(fā)任何域等到下一個(gè)更新周期再更新。

9.3 $watch()

scope.$watch() 已經(jīng)在很多場(chǎng)景被討論過的?；旧蟬cope.$watch是不好的設(shè)計(jì)的一個(gè)標(biāo)志。如果你非要?jiǎng)?chuàng)建一個(gè)觀察者。記住對(duì)它盡可能地解綁。你可以用$watch的返回函數(shù)解綁。

var unbinder = scope.$watch('scopeValueToBeWatcher', function(newVal, oldVal) {

});

unbinder(); //這一行將watcher從 $$watchers 中移除。

如果你不能早一點(diǎn)解綁，記住在 $on('$destroy') 中進(jìn)行解綁。

9.4 $on, $broadcast 和 $emit

像$watch一樣，他們都是一些很慢的事件，（有可能）遍歷整個(gè)作用域。他們可能像GOTO一樣，讓你的程序無法調(diào)試。不過幸運(yùn)地是像$watch一樣，他們都可以在完全不需要的時(shí)侯解綁。比如在 $on('$destroy')中。

9.5 $destroy

像前面提到的那樣，你應(yīng)該在$on('$destroy')中解綁你所有的事件偵聽器，取消任何$timeout的實(shí)例，或者任何其它異步執(zhí)行的交互。這不僅僅是確保安全。還可以讓你的域更快地被垃圾回收。不這樣做，他們會(huì)一直在后臺(tái)運(yùn)行。直接你清空CPU和RAM。

另外，解綁DOM上的事件偵聽器也非常重要，不這樣做很可能在老式瀏覽器中引起內(nèi)存泄露。

9.6 $evalAsync

scope.$evalAsync是一個(gè)強(qiáng)大的工具。它可以在當(dāng)前域中執(zhí)行，并不觸發(fā)域的更新。evalAsync可以極大地提高你網(wǎng)頁的性能。

10 指令問題

10.1 隔離的域（Isolate Scope）和Transclusion

域隔離和Transclusion是Angular最另人激動(dòng)的特性，它們是Angular的核心組件。

但是這里也有一些權(quán)衡，指令不能直接創(chuàng)建一個(gè)替換他們父組元素的域。通過隔離的域或Transclusion我們可以創(chuàng)建一個(gè)新的對(duì)象去跟蹤，添加新的監(jiān)視器，但是這也會(huì)降低應(yīng)用的性能。在添加之前應(yīng)該仔細(xì)想一想有沒有這個(gè)必要。

10.2 編繹周期

指令(Directive)的compile函數(shù)是在域被附加前操作DOM的完美功能（比如說綁定事件）。一個(gè)很重要的性能方面是，傳入compile函數(shù)的元素和屬性以原始html模板呈現(xiàn)。只會(huì)被運(yùn)行一次，接下來會(huì)直接使用。另外一個(gè)重要的點(diǎn)是prelink和postlink的區(qū)別。prelink從外向內(nèi)執(zhí)行。postlinks從內(nèi)向外執(zhí)行。prelink性能稍好一些，因?yàn)樗粫?huì)產(chǎn)生第二次更新周期。但是這時(shí)子元素的DOM還未被創(chuàng)建。

11 DOM事件問題

Angular提供了很多預(yù)定義的DOM事件指令。ng-click，ng-mouseenter，ng-mouseleave等等。當(dāng)調(diào)用scole.$apply()時(shí)這些事件都會(huì)被執(zhí)行。另外一種更有效率的方式是直接在DOM上面綁定addEventListener，并且盡量使用scope.$digest

優(yōu)化實(shí)例

測(cè)試一個(gè)應(yīng)用框架確實(shí)是個(gè)嚴(yán)峻的挑戰(zhàn)，當(dāng)用戶點(diǎn)擊日志中任何一個(gè)單詞，我們就要搜索出相關(guān)信息，而頁面上可以點(diǎn)擊的元素又不計(jì)其數(shù)；我們想讓日志的分頁功能也瞬間得到反饋。我們其實(shí)已經(jīng)預(yù)先獲取到了下一頁面的日志數(shù)據(jù)，所以用戶接口的更新就成為了瓶頸，如果拿 AngularJS直接實(shí)現(xiàn)日志視圖的換頁功能需要1.2秒，但是如果仔細(xì)優(yōu)化一下的話就可以降到35毫秒。這些優(yōu)化被證明在應(yīng)用的其他部分也是適用的，并且對(duì)AngularJS適應(yīng)性也很好。但我們必須打破一些規(guī)則來實(shí)現(xiàn)我們的想法，稍后討論。

201635161723160.jpg (590×558)

一個(gè)Github更新的日志demo

An AngularJS log viewer

本質(zhì)上，日志視圖就是一個(gè)日志消息的列表，每個(gè)字都可以點(diǎn)擊。所以把Angular的指令加到DOM元素中，簡單實(shí)現(xiàn)如下：

<span class='logLine' ng-repeat='line in logLinesToShow'>

 <span class='logToken' ng-repeat='token in line'>{{token | formatToken}} </span>

</span>

在單頁面應(yīng)用中有個(gè)數(shù)千個(gè)tokens是很正常的，在早期的測(cè)試中，我們發(fā)現(xiàn)進(jìn)入日志的下一頁會(huì)花費(fèi)好幾秒來執(zhí)行JavaScript。更糟的是，不相關(guān)的操作(比如點(diǎn)擊導(dǎo)航下拉框)延遲也不輕，AngularJS的大神說最好把數(shù)據(jù)元素綁定的數(shù)量控制在200以下。對(duì)于一個(gè)單詞就是一個(gè)元素的我們來說，早已遠(yuǎn)超這個(gè)數(shù)。

分析：

用Chrome的JavaScript profiler工具，我們可以快速定位兩個(gè)拖延點(diǎn)。首先，每次更新要花大量時(shí)間在DOM元素的創(chuàng)建和銷毀上，如果新的view有不同的行數(shù)，或者任何一行有不同數(shù)量單詞，Angular的ng-repeat指令就會(huì)創(chuàng)建或者銷毀DOM元素，這個(gè)代價(jià)太大了。

其次，每一個(gè)單詞都有自己的change watcher，AngularJS會(huì)watch這些單詞，一旦鼠標(biāo)點(diǎn)擊就會(huì)觸發(fā)，這個(gè)是影響不相關(guān)操作(下拉菜單導(dǎo)航)延遲的罪魁禍?zhǔn)住?/P>

優(yōu)化#1：緩存DOM elements

我們創(chuàng)建了一個(gè)ng-repeat指令的變體，在我們的版本中，如果綁定數(shù)據(jù)的數(shù)量減少了，超出的DOM元素會(huì)隱藏而不是銷毀，如果元素的數(shù)量過會(huì)兒有增加了，我們會(huì)重用這些緩存的元素。

優(yōu)化#2：Aggregate watchers

用來調(diào)用change watchers的所有時(shí)間大部分都浪費(fèi)了，在我們的應(yīng)用中，特定單詞上的數(shù)據(jù)綁定都是永遠(yuǎn)不會(huì)改變的除非整個(gè)日志消息變化，為了達(dá)成這一點(diǎn)，我們創(chuàng)建了一個(gè)指令”hides“隱藏掉了子元素的change watchers，只有等特定父元素表達(dá)式修改的時(shí)候才會(huì)調(diào)用他們。就這樣，我們避免了在每一次鼠標(biāo)點(diǎn)擊或者其他微小的修改而導(dǎo)致的全盤change watchers(為了實(shí)現(xiàn)這個(gè)想法，我們稍微修改了AngularJS的抽象層，我們稍后再細(xì)說)。

優(yōu)化#3：推遲元素創(chuàng)建

前面說了，我們?yōu)槿罩纠锏拿恳粋€(gè)單詞單獨(dú)創(chuàng)建了DOM，我們可以利用每一行的單個(gè)DOM元素得到相同的視覺呈現(xiàn)；其他元素都是為響應(yīng)鼠標(biāo)點(diǎn)操作而創(chuàng)建的，因此，我們決定推遲這部分創(chuàng)建，只有當(dāng)鼠標(biāo)移動(dòng)到某行的時(shí)候我們?cè)賱?chuàng)建他。

為了實(shí)現(xiàn)這個(gè)，我們?yōu)槊恳恍袆?chuàng)建了兩個(gè)版本，一個(gè)就是簡單的文本元素來顯示完整的日志信息，另外一行就是個(gè)占位符，用來顯示最終為每一個(gè)單詞填充后的效果。這個(gè)占位符開始是隱藏的，當(dāng)鼠標(biāo)移動(dòng)到那一行的時(shí)候才會(huì)顯示，而簡單文本那一行這個(gè)時(shí)候就隱藏掉。下面會(huì)講到，顯示占位符是如何填充單詞元素的。

優(yōu)化#4：避開對(duì)隱藏元素的監(jiān)視

我們創(chuàng)建了另外一個(gè)指令，用來阻止對(duì)隱藏元素的監(jiān)視，這個(gè)指令支持優(yōu)化#1，相較于原數(shù)據(jù)，我們多了更多的隱藏DOM節(jié)點(diǎn)，所以必須消除對(duì)多出來的DOM節(jié)點(diǎn)的監(jiān)視。這也支持優(yōu)化#3，讓推遲單詞節(jié)點(diǎn)的創(chuàng)建更加容易。因?yàn)橹钡竭@行數(shù)據(jù)的tokenized版本出現(xiàn)我們才會(huì)創(chuàng)建他 。

下面的代碼就是所有的優(yōu)化后的樣子，我們自定義的指令是粗體顯示。

<span class='logLine' sly-repeat='line in logLinesToShow' sly-evaluate-only-when='logLines'>

 <div ng-mouseenter=”mouseHasEntered = true”>

  <span ng-show='!mouseHasEntered'>{{logLine | formatLine }} </span>

  <div ng-show='mouseHasEntered' sly-prevent-evaluation-when-hidden>

   <span class='logToken' sly-repeat='tokens in line'>{{token | formatToken }}</span>

  </div>

 </div>

</span>

Sly-repeat 是ng-repeat的變體，用來隱藏多出來的DOM元素而不是銷毀他們，sly-evaluate-only-when阻止內(nèi)部change watchers除非“l(fā)ogLines”變量修改，sly-prevent-evaluation-when-hidden主要負(fù)責(zé)當(dāng)鼠標(biāo)移動(dòng)到指定行的上面的時(shí)候，隱藏的div才顯示。

這里展示出了AngularJS對(duì)于封裝和分離的控制力，我們做了復(fù)雜的優(yōu)化但是并沒有影響模板的結(jié)構(gòu)(這里展示的代碼并不是真正產(chǎn)品里的代碼，但是他展示了所有的要點(diǎn))。

結(jié)果：

我們來看一下效果，我們添加了一些代碼來衡量，從鼠標(biāo)點(diǎn)擊開始，一直到Angular's $digest循環(huán)結(jié)束(意味著更新DOM結(jié)束)。

我們衡量點(diǎn)擊”下一頁“按鈕的性能是通過Tomcat日志，環(huán)境用的是MacBook Pro上的Chrome，結(jié)果見下表(每個(gè)數(shù)據(jù)都是10次測(cè)試的平均值)：

這些數(shù)據(jù)不包括瀏覽器用在DOM布局和重繪(JavaScript執(zhí)行完成后)的時(shí)間，每次大概30毫秒。盡管如此，效果也顯而易見；下一頁的響應(yīng)時(shí)間從1200毫秒驟降至35毫秒(如果算上渲染是65毫秒)。

“從服務(wù)器獲取數(shù)據(jù)”里的數(shù)據(jù)包括了我們使用AJAX從后端獲取log數(shù)據(jù)的時(shí)間。這個(gè)跟點(diǎn)擊下一頁按鈕不同，因?yàn)槲覀冾A(yù)取下一頁的log數(shù)據(jù)，但是或許適用于其他的UI響應(yīng)。即使這樣，優(yōu)化后的程序也可以做到實(shí)時(shí)更新。