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.
ngAnimate causes serious layout thrashing #4124
Description
Using ngAnimate can cause serious layout thrashing. Compare two videos:
- Our current app,
ngAnimateincluded: http://youtu.be/kUf9vDYIlt0 - Our current app with just one difference - removing
ngAnimatefrom the list of modules our app depends on: http://youtu.be/210VHxidY0o
I recorded Timeline profiles for an operation of switching the tab from the second to the third one; version with ngAnimate causes a massive amount of reflows:
- Timeline with
ngAnimateincluded:
- Timeline without
ngAnimate:
One of my colleagues, @jrencz, created videos of analogous operations on his 4-year-old MacBook, notice the slowness:
ngAnimateincluded: http://www.youtube.com/watch?v=FEmSiWq1qAIngAnimateexcluded: http://www.youtube.com/watch?v=bshDaxUAzU4
Activity
joegaudet commentedon Sep 25, 2013
This is the same issue as #4011, but definitely would love to have it addressed.
mgol commentedon Sep 25, 2013
@joegaudet Probably. My issue has more data, though. ;)
joegaudet commentedon Sep 25, 2013
Yeah, we experience the same thing our app. We have tables of 400 + rows, which basically makes the app unusable. I put a guard in the animation code, but that ends up thrashing the filtering on repeaters.... so I guess waiting for @matsko et al.
bfricka commentedon Sep 26, 2013
These looks like exact screen grabs of the timeline profiles for EPG app we're building right now.
matsko commentedon Sep 26, 2013
The plan is to performance-tune ngAnimate using caching. Getting to work on this today and tomorrow actually.
joegaudet commentedon Sep 26, 2013
@matsko sweet man, can't wait. Thanks as always for your hard work man.
matsko commentedon Sep 26, 2013
My pleasure :)
matsko commentedon Oct 1, 2013
@mzgol @joegaudet please try testing out your code using the JS files mentioned in #4011 (comment)
mgol commentedon Oct 1, 2013
@matsko Is this available as a commit somewhere? I use a patched AngularJS version to add support for pushState (see #3325) so I need it as a commit and not just built files.
matsko commentedon Oct 1, 2013
@mzgol matsko@1022d56
mgol commentedon Oct 1, 2013
@matsko Unfortunately, after applying your patch there's still severe layout trashing with
ngAnimatepresent in app dependencies; all those repaints disappear if the dependency is removed.matsko commentedon Oct 10, 2013
@mzgol merging something in so I'll be closing this issue soon.
fix($animate): perform internal caching on getComputedStyle to boost …
matsko commentedon Oct 11, 2013
Landed as ddcbf76
mgol commentedon Oct 11, 2013
I confirm the issue is fixed on current master. Thanks again. Good work. :)
bfricka commentedon Oct 11, 2013
Definitely. Congrats @matsko. 👍
jeffbcross commentedon Oct 11, 2013
👍 👍 👍
fix($animate): perform internal caching on getComputedStyle to boost …
fix($animate): perform internal caching on getComputedStyle to boost …
[-]ngAnimate causes serious layout trashing[/-][+]ngAnimate causes serious layout thrashing[/+]