Web Animation Performance

After the render tree

Freddy Harris / @harrisfreddy

Render Engine

Render Engine

Layout

aka. Reflow

CSS Layout Mode

• 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

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

Freelance Front-end

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