ng-animation slowly with ng-repeat

[kimx]

Hello I have a array that contain 500 items.First time it render by ng-repeat is faster but when it get data from backend server again that render slowly. I try some tip from other site suggestion like used 'track by'.But it cannot be improve.

Finally I used chrome profile tool record to find out .As below photo.The root cause seems by ng-animate.When I remove ng-animate from module the render time from 4300 ms to 100 ms.

example slowly ng-repeat

faster ng-repeat

ps: For second plunkr I just remove ng-animate from module

Please help the Issue,thank you very much.

[matsko]

We do have a fix that does speed this up at least twice for 1.4.5

(slowly) http://plnkr.co/edit/qRl4IAHRPfpBVgiq34Xg?p=preview

(somewhat faster) http://plnkr.co/edit/ELyqLggWtCaVoGfskvrD?p=preview

Once 1.4.5 is out later this week we can look into speeding up.

[kimx]

Hi @matsko
I just try your faster sample,but It just speeding up for about 1000ms.That is not far than remove ng-animate from module or used animateProvider.classFilter

[matsko]

Yes exactly. There will be an effort to speed this up post 1.4.5.

[kimx]

Hi @matsko I am looking forward this coming release. Thanks a lot.

[Narretz]

This is unfortunately still slow, even in 1.5. Most of the time is lost in the loop that determines if an element is animatable. For that, it needs to make sure a) the element and its parents have $animate.enabled(true), b) the element is a child of the body and c) the element is a child of the app $rootElement. In an ngRepeat, this is done for each element, which takes a while. There is a micro optimization that I will put in a PR later, but it's not doing a lot.

What you can do is call $animate.enabled(el, false) on each element in the repeat, which will cut down the render time by a second or so:

http://plnkr.co/edit/SGuXzgU2u1ZFhBr0EZkT?p=preview

[Narretz]

Sorry, $animate.enabled(e, false) on the repeated element doesn't actually work because of ngRepeat / transclusion.

[graingert]

@Narretz I'm rendering angular components with jsdom, and calls to $animate seem to be taking the most time.

Is there any way to tell angular that no elements animate?

[Narretz]

@graingert Different ways, actually: https://code.angularjs.org/snapshot/docs/guide/animations#how-to-selectively-enable-disable-and-skip-animations

Does this help?

[petebacondarwin]

@Narretz says that #14166 could improve this performance when there are no animations running. But otherwise we are not going to be able to work on this further.