This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
ng-animation slowly with ng-repeat #12678
Description
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
ps: For second plunkr I just remove ng-animate from module
Please help the Issue,thank you very much.
Activity
[-]ng-animation slowy with ng-repeat[/-][+]ng-animation slowly with ng-repeat[/+]matsko commentedon Aug 26, 2015
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 commentedon Aug 26, 2015
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 commentedon Aug 26, 2015
Yes exactly. There will be an effort to speed this up post 1.4.5.
kimx commentedon Aug 26, 2015
Hi @matsko I am looking forward this coming release.
Thanks a lot.
Narretz commentedon Jan 11, 2016
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=previewNarretz commentedon Jan 11, 2016
Sorry, $animate.enabled(e, false) on the repeated element doesn't actually work because of ngRepeat / transclusion.
graingert commentedon Oct 13, 2017
@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 commentedon Oct 13, 2017
@graingert Different ways, actually: https://code.angularjs.org/snapshot/docs/guide/animations#how-to-selectively-enable-disable-and-skip-animations
Does this help?
petebacondarwin commentedon May 16, 2018
@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.