大型應用下的 AngularJS 效能

1 介紹

無論你是為一個擁有大量使用者的舊應用編寫一個Angalar前端,或已有的Angular應用正在迅速擴張,效能都是一個重要方面。理解什麼會導致AngularJS應用程式響應變慢，並且知道在開發過程中對此做出一些權衡是非常重要的。本文將講述一些AngularJS可能導致的常見效能問題，以及給出在未來如何修複和避免他們的建議。

1.1 需求，假設

本文假設對JavaScript程式語言和AngularJS比較熟悉。當使用特定於版本的特性,他們會被標註。如果你已經花了一些時間在玩Angular，但還沒有認真地處理效能問題，那麼你最能吸收這篇文章的要義。

2 行業工具

2.1 基準分析

最出色的程式碼基準測試工具就是 jsPerf。為了增強可讀性，我將在後面相關的部分連結到特定的test runs（測試例子）。

2.2 效能分析

Chrome開發工具有一個很棒的Javascript分析器。我強烈推薦閱讀本系列文章。

2.3 Angular Batarang

由Angular 核心團隊維護的一個專用的Angular 除錯器， 在GitHub上可以獲取。

3 軟體效能

有兩個導致軟體效能差的根本原因。

第一個是演演算法的時間複雜度。解決這個問題很大程度上超出了本文的範圍,一般可以這樣說,時間複雜度是衡量一個程式需要做多少次的比較來實現一個結果。比較數量越多,程式越慢。一個簡單的例子是線性查詢與二分查詢。線性查詢對於同一組資料需要進行更多的比較,因此會慢。時間複雜度的詳細討論,請參考 維基百科文章。

第二個原因是空間複雜度。這是一臺電腦執行你的解決方案需要多少“空間”或記憶體的測量。需要的記憶體越多,解決方案就越慢。本文將討論的大多數問題,圍繞空間複雜度。詳細討論,請參閱這裡.。

4 Javascript效能

有些要說的是關於Javascript效能,這裡並不侷限於Angular。

4.1 迴圈

避免在一個迴圈中呼叫外部函式。一旦任何呼叫可以在迴圈外部的完成,它將大大加速你的系統。例如:

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];

}

http://jsperf.com/for-loop-perf-demo-basic

4.2 Dom訪問

需要著重註意的是訪問DOM是昂貴的。

angular.element(‘div.elementClass’)

雖然這在AngularJS應該不是一個問題，意識到這一點仍然是有用的。這裡說的第二件事是，DOM樹應該保持盡可能小。

最後,如果可能的話,避免修改DOM,不設定行內樣式。這是由於JavaScript重排。重排的深度的討論超出了本文的範圍,但是這裡可以找到一個不錯的參考。

4.3 變數作用域和垃圾收集

所有變數作用域盡可能緊密，會讓JavaScript垃圾收集器儘早地釋放你的記憶體。這是通常JavaScript，特別是Angular緩慢，延遲，不響應的一個極其常見原因。請註意以下問題:

function demo(){

var b = {childFunction: function(){console.log(‘hi this is the child function’)};

b.childFunction();

return b;

}

函式終止時,將沒有必要進一步取用b,垃圾收集器將釋放記憶體。然而,如果在其他地方有這樣一行程式碼:

var cFunc = demo();

我們現在將物件系結到一個變數同時保持取用,阻止垃圾收集器回收它。雖然這可能是必要的,重要的是你要知道物件取用有什麼影響。

4.4 陣列和物件

有許多事情要談。首先且最簡單的是,陣列總是比物件更快,數字訪問好於非數字訪問。

for (var x=0; x

i = arr[x].index;

}

上面快於下麵

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

i = obj[x].index;

}

還快於

var keys = Object.keys(obj);

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

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

}

http://jsperf.com/array-vs-object-perf-demo

此外,請註意,基於V8的現代瀏覽器,有較少屬性的物件會使用一種特殊的表現形式，來提高他們的訪問速度，所以試著保持屬性的數量最小化。也請註意,儘管JavaScript陣列中可以使用混合型別，並不意味著這是一個好主意:

var oneType=[1,2,3,4,5,6]

var multiType=[“string”, 1,2,3, {a: ‘x’}]

任何對第二項的操作都將明顯慢於對第一項,這不僅僅是因為邏輯需要更複雜。

http://jsperf.com/array-types-compare-perf

避免使用delete。例如,給定:

var arr = [1,2,3,4,5,6];

var arrDelete = [1,2,3,4,5,6];

delete arrDelete[3];

任何對arrDelete的迭代將慢於對arr的相同迭代。

http://jsperf.com/delet-is-slow

這將會在陣列中建立一個坑，大大降低操作的效能。

5 重要概念

既然我們已經討論了JavaScript效能,它對理解一些Angular背後的關鍵概念很重要。

5.1 Scopes（作用域） 和Digest週期

Angular Scopes本質上是JavaScript物件。他們遵循一個預定義的原型繼承規則,深入討論超出了本文的範圍。與本文有關係的,如前所述,使用小Scopes比大Scopes更快。

另一個可以得出的結論是,任何時間,一個新的Scopes被建立,就會為垃圾收集器增加更多需要收集的值。

編寫普通的且效能特別的Angular JS應用程式時，digest週期特別重要。實際上,每一個scope中都儲存了一個$$watchers函式陣列。

每次對scope中的值呼叫$watch函式，或者一個值被插入或系結到DOM上，如使用ng-repeat，ng-switch，ng-if，或者其他的DOM屬性或元素，都會在最裡層的scope的$$watchers陣列中新增一個函式。

當scope裡的任何值發生變化時, $$watchers中的所有watcher將被觸發,如果其中任何一個修改了一個被檢測的值, 他們將再次被觸發。這將繼續下去,直到$$watchers陣列不在有任何變化,或AngularJS丟擲一個異常。

另外,如果非Angular程式碼透過 $scope.$apply()執行。這將立即啟動digest週期。

最後註意的是,$scope.evalAsync()將在一個非同步迴圈中執行,它不會觸發一個新的Digest週期, 它將執行在當前或下一個digest週期的末尾。

6 常見問題:用心設計Angular

6.1 大型物件和伺服器呼叫

所以這一切教會了我們什麼?首先,我們應該思考我們的資料模型,努力限制物件的複雜性。這對從伺服器傳回的物件特別重要。

簡單地將整個資料庫行強制.toJson()是非常誘人。這裡必須要強調：請不要這樣做。

使用一個自定義的序列化器，傳回Angular應用程式必要的屬性的子集。

6.2 監視函式

另一個常見的問題是在watcher或系結中使用函式。不要將任何指令(ng-show ng-repeat,等等)直接系結函式。不要直接監測函式的結果。該函式將在每個digest週期執行，這極有可能降緩你的程式。

6.3 監視物件

類似的,Angular 能夠透過將scope.$watch第三個可選的引數設定為true 來監視整個物件。說句不好聽,這是一個非常糟糕的想法。一個更好的解決方案是依靠服務和物件取用，在scope之間傳播物件的變化。

7 串列問題

7.1 大型串列

如果可能的話,避免大型串列。ng-repeat會做一些相當沉重的DOM操作(更不用說汙染$$watchers),所以無論是透過分頁或無限滾動，試著保持任何串列的渲染使用小型資料。

7.2 過濾器

如果可能的話,避免使用過濾器。他們每個digest迴圈執行兩次,一次是當發生任何變化,另一次是收集進一步的改變,實際上,不從記憶體刪除任何子集,而是簡單地用css來過濾。

$index沒有什麼價值,因為它不再對應於實際的陣列索引,而是排序後陣列的索引。它還會阻止你釋放所有串列的scope。

7.3 更新ng-repeat

同樣重要的是避免使用ng-repeat時進行全域性串列掃清。在內部,ng-repeat將產生一個$$ hashKey屬性，用它來作為集合中的識別項。這意味著做一些像scope.listBoundToNgRepeat = serverFetch() 的操作將導致對整個串列進行一個完整的重新計算,導致對每個個體元素的transcludes執行以及watchers 觸發。這是一個非常昂貴的做法。

有兩種方法可以解決這個問題。一是維護兩個集合和在過濾後的集合上使用ng-repeat(更通用的,需要定製同步邏輯,因此演演算法更複雜和難以的維護),另一種是使用track by來指定自己的key(需要Angular 1.2+,通用性略低於前者，不需要自定義同步邏輯)。

簡而言之

scope.arr = mockServerFetch();

將比下麵慢:

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);

});

將比簡單新增慢：