Web Animation Performance

After the render tree

Freddy Harris / @harrisfreddy

Render Engine

Render Engine

Layout

aka. Reflow

CSS Layout Mode

Algorithm determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes

• Block Layout
• Inline Layout
• Table Layout
• Positioned Layout
• Flexible Box Layout
• Grid Layout

Layout

Paint

Paint

Applique tous les styles visuels

• background
• color
• box-shadow
• border-color
• …

Composite

Composite

• Bitmaps envoyés au GPU
• GPU applique des opérations sur les textures (matrix operation, alpha blends, … )
• Certains éléments et certaines propriétés provoquent automatiquement la création d'un Layer
  • 3D transform
  • video, canvas
  • css animation opacity or transform
  • accelerated css filters
  • …

Composite

• Hack pour forcer l'accélération GPU : translateZ(0)
• Ne pas en abuser, surtout sur des éléments qui repaint
• À abandonner au profit de will-change

Cartoon

Layout

Paint

Composite

Animation

Animation

Le but est d'atteindre les 60 FPS (images par seconde)

Soit ~16.6ms entre chaque image

Framerate

Margin animation

Margin Desktop

Margin Mobile

Transform animation

Transform Mobile

Transform + Will-change animation

Transform + Will-change

caniuse

request Animation Frame

request Animation Frame

• Appelé avant le rendu de la frame
• Regroupe les transformations de la même frame
• Le callback n'est plus appelé lorsque la page n'est plus visible

function draw() {
  requestAnimationFrame(draw);
  // Drawing code goes here
}

requestAnimationFrame(draw);
          

caniuse

Debouncing / Throttling

• Ne pas rappeler une fonction avant un 'temps' donné
• Utile pour des animations basées sur Scroll, Mouse et Touch Events
• Découple les events de l'animation

var latestKnownScrollY = 0;

function onScroll() {
  latestKnownScrollY = window.scrollY;
}

function update() {
  requestAnimationFrame(update);

  var currentScrollY = latestKnownScrollY;

  // Drawing code goes here
}

requestAnimationFrame(update);
window.addEventListener('scroll', onScroll, false);
          

request Animation Frame

Est soumis à l'Event Loop car dans la Main Thread

Web Animations API

Web Animations API

• Unification des animations déclaratives et impératives
• Permet de créer une animation en JavaScript qui fonctionne avec la même efficacité qu'une animation CSS

element.animate([
  {transform: 'translate(200px, -100%)'},
  {transform: 'translate(200px, ' + window.innerHeight + 'px)'}
], {
  duration: 1500,
  iterations: 10,
  delay: 300
});
          

Web Animations API

Controller l'animation !

var animation = element.animate({transform: 'translateX(300px)'}, 1000);

animation.play();

animation.pause();
animation.currentTime = 500;

animation.playbackRate = 0.5;
animation.reverse();
          

Web Animations API

caniuse

References

• Talks
• Animations on Fire
• Delivering 60 FPS in the browser
• FLIP - First Last Invert Play
• Articles
• Accelerated Rendering in Chrome
• Rendering performance
• Simplify paint complexity and reduce paint areas
• Jank Busting for Better Rendering Performance
• Leaner, Meaner, Faster Animations with requestAnimationFrame
• User input framerate throttling in the browser
• W3C Web Animations
• Others
• CSS Triggers
• Jank Free
• Polyfill Web Animation API

Merci

@harrisfreddy

Freelance Front-end

React.js • Mobile First • Hybrid & Progressive Web Apps