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
AppName
Title
Decembre 1, 2015

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec purus ante. Maecenas a dui bibendum enim tincidunt bibendum. Aenean fermentum, nunc ac dignissim efficitur, lorem arcu eleifend mauris, ac accumsan leo arcu eget lorem. Proin nec elementum libero.

Vivamus tempus neque a tellus euismod volutpat. Quisque efficitur mauris urna. Suspendisse mollis facilisis convallis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec purus ante. Maecenas a dui bibendum enim tincidunt bibendum. Aenean fermentum, nunc ac dignissim efficitur, lorem arcu eleifend mauris, ac accumsan leo arcu eget lorem. Proin nec elementum libero.

Vivamus tempus neque a tellus euismod volutpat. Quisque efficitur mauris urna. Suspendisse mollis facilisis convallis.

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

Merci

Freelance Front-end

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