Video: Web Performance Mini Series: Animations (Paul Lewis)

TheSmithy Web Development

By Paul Lewis. See also his article on HTML 5 Rocks:
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Even more links:

  1. https://eu.udacity.com/course/browser-rendering-optimization–ud860
  2. https://developers.google.com/web/fundamentals/performance/rendering/
  3. https://aerotwist.com/blog/flip-your-animations/
  4. https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse
  5. https://aerotwist.com/blog/the-anatomy-of-a-frame/

Takeaway of this video:

The magic goal: 16ms

For 60HZ monitors aim for 16ms delay or less. (60fps = ~16ms per frame).
Delays above that will make the animation look janky
Note: for the 120HZ monitors that are getting more common these days the magic number would of course be 8 ms.


A bit of ‘theory’:

What goes into making a frame:
– JS
– Styles
– Layout
– Paint
– Composite

Layout and Paint are typically the most expensive operations here but also the ‘easiest’ to take out of the flow

Layout is triggered by a lot of css properties. See this overview for all of them, but to name a few:

  • width/height
  • padding/margin
  • position (top/bottom/left/right)
  • border/border-color/border-width
  • display
  • float/ clear
  • overflow
  • font-size/font-weight/font-family/line-height
  • text-align/vertical-align

The most common css properties to trigger Paint are:

  • color
  • visibility
  • text-decoration
  • border-radius/ border-style
  • box-shadow
  • background/ background-image/ background-repeat/ background-position
  • outline/outline-color/outline-style/outline-width

Layers

If you have two elements A and B on the page, and you want to move element B, you will have to scrub out B and paint it again on its new position.

A
B

However, if A and B are on different layers, you only have to move around the layer of element B

A
B

Now there are some things a browser can animate cheaply (because GPU’s are optimized for this type of stuff):

  1. Transformations: Translate, Scale, Rotate, Skew, Matrix transformations
  2. Opacity

Create a new Layer and transform it

Use this CSS to create a new layer:

#box {
  will-change: transform
}

Warning: too many layers will cause your composite layer to grow, so you will have to find a balance there.