perf(ngAnimate): cache repeated calls to addClass/removeClass #14166
Conversation
matsko
force-pushed
the
fix_ng_animate_caching
branch
from
e58c06b to
4745a0d
Compare
Applies to 1.4.x and 1.5.x and master Closes angular#14165 Closes angular#14166
|
Don't merge this yet. There's a cache issue. |
matsko
force-pushed
the
fix_ng_animate_caching
branch
from
4745a0d to
0f15476
Compare
Applies to 1.4.x and 1.5.x and master Closes angular#14165 Closes angular#14166
|
OK now it's fixed. |
Applies to 1.4.x and 1.5.x and master Closes angular#14165 Closes angular#14166
matsko
force-pushed
the
fix_ng_animate_caching
branch
from
0f15476 to
1d766cf
Compare
|
Wow that's a ton of changes. I'll try to review today. However could you update the commit message with an explanation of the issue and the fix? |
| from: { background: 'red' }, | ||
| to: { background: 'blue', 'font-size': '50px' } | ||
| from: { height: '100px' }, | ||
| to: { height: '200px', 'font-size': '50px' } |
There was a problem hiding this comment.
@matsko why change these styles? It seems arbitrary.
There was a problem hiding this comment.
When the element is attached to a parent element then the colors are actually applied and getComputedStyle (which is what element.css in jQuery uses) actually figures out what the color is. Beforehand it was just using the inline style. Since we now deal with actually getting the RGB value for the color it was easier just to use a more stable value like a height measurement value.
|
Oh and @matsko can you add a demo that shows the speed up that this introduces? |
|
Here's a plnkr to test the performance: http://plnkr.co/edit/bnaaaHbWkyQULeoOOg2X?p=preview There's a simple ngRepeat that an ngClass on it. In my tests, ng animate with this test is about 30% faster. However, if you include the Regarding animating nth-child(x) elements in a repeater, that doesn't seem to work anyway: http://plnkr.co/edit/klCK5E22YPJ9Zfbz2meF?p=preview |
…imation has no duration Background: ngAnimate writes helper classes to DOM elements to see if animations are defined on them. If many elements have the same definition, we can cache the definition and skip the application of the helper classes altogether. This helps particularly with large ngRepeat collections. Closes angular#14165 Closes angular#14166
…imation has no duration Background: ngAnimate writes helper classes to DOM elements to see if animations are defined on them. If many elements have the same definition, we can cache the definition and skip the application of the helper classes altogether. This helps particularly with large ngRepeat collections. Closes angular#14165 Closes angular#14166
…imation has no duration Background: ngAnimate writes helper classes to DOM elements to see if animations are defined on them. If many elements have the same definition, we can cache the definition and skip the application of the helper classes altogether. This helps particularly with large ngRepeat collections. Closes angular#14165 Closes angular#14166
…imation has no duration Background: ngAnimate writes helper classes to DOM elements to see if animations are defined on them. If many elements have the same definition, we can cache the definition and skip the application of the helper classes altogether. This helps particularly with large ngRepeat collections. Closes angular#14165 Closes angular#14166
…imation has no duration Background: ngAnimate writes helper classes to DOM elements to see if animations are defined on them. If many elements have the same definition, and the same parent, we can cache the definition and skip the application of the helper classes altogether. This helps particularly with large ngRepeat collections. Closes #14165 Closes #14166 Closes #16613
Applies to 1.4.x and 1.5.x and master
Closes #14165
Closes #14166