[AngaulrJs] 解決ng-animate引起的效能問題

前陣子將AngularJs從1.3.18升上1.4.4後,遇到若ng-repeat的資料數目超過約500個時,在第一次繋結很快,但在取得資料再重新繫結時,會有很明顯的效能問題,整個畫面會卡住約5秒。如下sample。
See the Pen ng-animate-slowly-1 by kimxinfo (@kimxinfo) on CodePen.

降回1.3.18測試後,並不會有此問題........。暗...升上來,豈有再降回的道理,立馬使用chrome profile來錄製,看是慢在哪一段。經測試後,發現慢的js是angular-animate.js 。

image_thumb1
之前看過1.4.4 的 release note ,想說不是針對ng-animate作了很多bug修正及改善。怎麼會引起效能問題..........重點是,我沒有使用它在ng-repeat上丫....。


解決方法

在尋找解答前,我先再確定一下是否真的是ng-animate引起的問題。將ng-animate從app.module移除,如下圖紅框。再測試後,約200毫秒....。

image_thumb2
經過此測試後,已經很確定是ng-animate所引起,官網上也有寫到預設support ngRepeat、ngClass、ngIf等。只是不知為什麼在此版本沒特別去處理未設定動畫的元素。目前若要簡單一點的處理,就是將ng-animate移除,但在專案上有些功能有使用到它,所以不能這樣作。好在ng-animate內建有提供2個方法,可以自行針對動畫的啟甪或停用。

1.使用$animateProvider.classNameFilter

此方法可以限定依傳入的cssClassName(使用規則運算式),才會使用ng-animate

image_thumb7
範例


2.使用directive+$animate

此方法跟上一個不同,上個方法是針對特定的cssSelector啟用。此方法是針對特定的元素作停用

image_thumb9
範例


針對此問題已回報給angular team,得到的回覆是在1.4.5的效能會得更好的改善,不過這兩天我測試1.4.5的版本,並沒有改善此問題。

 

參考來源

http://www.ngroutes.com/questions/AUuAE7rua5vEqxqlLCVq/disable-nganimate-for-some-elements.html

這個網誌中的熱門文章

[.NET Core] 將專案發行至IIS

[TFS] 分支與合併