Benchmarks

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-18
Updated:
2016-11-19
Tags:
libraries JavaScript animation Performance
Performance

CSS, JS, SMIL, comparison tests

She did a lot of benchmarks in the chrome timeline. And also a lot of visual benchmarks.

People expect mobile to be faster than on desktop (web). Performance is even more important for mobile

jankfree.org is a great resource. 
Advanced Performance Audits with DevTools by Paul Irish
CSS-Tricks Article: Weighing SVG Animation Techniques with Benchmarks (Sara wrote this article)

So is it js/css or what is faster? 

Above all else: test things yourself! 
Timeline Benchmarks

She shows a table. They're from early 2015 so lot of things have changed since then (workshop was held October 2015).

The table shows "other", "painting", "rendering" and "scripting". Of all these "painting" is the most costly. It causes the most jank.

She has found, that GSAP performed "as well, or better than native technology". That's pretty good.
She was moving things with transforms which might add hardware acceleration. 
She explains her "visual benchmark" setup.

Chrome timeline is not the absolute most reliable way to visually judge the performance of an animation. 

A rectangle moving left-to right in a loop over a gradient. Codepen
It's a long animation to make sure garbage collection is included. 

She took screenshots and measured the position of the element. She could detect if the element did not move between two frames (jank). 

- Why does she use translateZ in so many places?
If you're moving things inside the SVG DOM, it cannot be hardware accelerated. (translateZ adds hardware acceleration).

Timeline Benchmarks - Normalised table

Velocity was not very fast, GSAP was as good as CSS ("naive" method). 
CSS with hardware acceleration was very low. Maybe even too low for people to not to question Chrome Timeline accuracy. 

So the visual benchmarks:

Time stalled (janked):
Velocity: 34
CSS-HA: 28
SMIL-HA: 16
GSAP: 26

So here GSAP was better than in CSS. CSS did have visual jank. GSAP had less jank than CSS. 

She promises to do more tests. She will put them on CSS-Tricks. She will benchmark React as well. Also old and new jQuery.

SMIL is getting deprecated. 

New jQuery will use requestAnimationFrame.

Note: if you use requestAnimationFrame on too many elements, the inverse can happen and reduce performance and add jank.

So it was intentional that in the beginning jQuery did not use requestAnimationFrame.