Pour obtenir des interactions fluides

• Défilement (scroll)
• Transition et animation CSS
• Manipulation du contenu

Pour l'image, l'immersion et l'accessibilité !

Parce que le rendu était trop lent, ils ont diminué l'ombre dans leur design.

— airbnb, bit.ly/airbnb-shadow

Le rendu CSS est l'un des trois principaux facteurs de lenteurs JavaScript.

— Opera, bit.ly/opera-css-perfs

Ne pas faire de transition ou d'animation CSS avec une autre propriété que

• opacity
• transform
  (translation, rotation, redimensionnement, ...)
• filter
  (flou, luminosité, contraste, niveau de gris, ...)

On va essayer de diminuer la zone "boîte noire"

Ne pas faire de transition ou d'animation CSS avec une autre propriété que

• opacity
• transform
• filter

Les navigateurs web ont, à peu près,
deux fils d'exécution pour le rendu

• Le principal (Main)
• Celui de composition (Compositor)

— Adobe, bit.ly/inside-the-browser

Le fil principal se charge de

• Calculer les règles CSS
• La mise en page (Layout / Reflow)
• Calculer chaque pixels (Painting / Draw)

— Ilya Grigorik, bit.ly/process-pipeline

Le fil de composition se charge principalement de dessiner les pixels sur l'écran

Chaque frame doit prendre maximum 16ms pour garder une fréquence d'images à 60fps

— Youtube, youtu.be/pfiHFqnPLZ4

Le premier rendu d'un élément

Lorsqu'on anime la largeur d'un élément, on déclenche un re-layout

Aucune autre action utilisateur n'est possible pendant la mise en page.

— Google, bit.ly/layout-engine

Lorsqu'on anime une transformation sur un élément, on reste dans la composition

— Paul Lewis (Google), https://csstriggers.com

Ne pas faire de transition ou d'animation CSS avec une autre propriété que

• opacity
• transform
• filter

Détecter les reflows (Console de Firefox)

Détecter les repaints (Console de Chrome)

Investiguer les repaints (Timeline de Chrome)

Les éléments fixes sont redessinés au défilement

Vous pouvez créer un nouveau layer en appliquant perspective(1px)*

* Attention quand même aux hacks magiques !

Si vous avez une image de fond fixe au défilement

• Séparer l'image sur un élément à part
• Créer un nouveau layer pour cet élément

— Four Kitchens, http://bit.ly/bg-fixed-perfs

Pour animer l'ajout d'une ombre sur un élément

• Séparer l'ombre sur un élément à part
• Animer l'opacité de cet élément

— Tobias Ahlin, http://bit.ly/animate-shadow

Ne pas faire de transition ou d'animation CSS avec une autre propriété que

• opacity
• transform
• filter

— CSSReflow (Mozilla), bit.ly/cssreflow

Elle est déclanchée par

• Modification du DOM, dont le contenu
• Prise de mesure
  (offsetHeight ou getComputedStyle)
• Modification de l'attribut class
• Modification des styles CSS
• Le redimenssionnement de la fenêtre
• Le scroll

Créer un nouveau layer

• translateZ(0)
• perspective(1px)
• will-change*

* Mais attention will-change will change

— GreenSock, greensock.com/will-change