Performances de rendu CSS

#WeLoveSpeed

D'accord, mais pourquoi ?

Pour avoir une interface fluide :

  • Lors du défilement
  • Lors des transitions et animations CSS
  • Lors de la manipulation de contenu
2

Le saviez-vous ?

Airbnb a réduit ses ombres de boîte pour améliorer les performances de défilement

CSS box-shadow can slow down scrolling 3

Qui suis-je ?

Thomas Zilliox

Expert CSS freelance

Auteur de
Départ immédiat pour Flexbox

https://tzi.fr 4

Le saviez-vous ?

Vous ne devriez certainement pas utiliser Flexbox pour votre gabarit, pour des raisons de performances

Don't use flexbox for overall page layout 5

Le saviez-vous ?

Il ne faut pas faire de transformations sur des images SVG !

(More Than) Doubling SVG FPS Rates at Khan Academy 6

Le saviez-vous ?

Ajouter will-change: transform sur vos éléments en position: fixed et ce sera plus rapide !

Fix scrolling performance with CSS will-change property 7

Des astuces fiables

ou des recettes de grand-mères ?

Des astuces fiables ?

  • Ombres de boîte
  • Flexbox
  • SVG
  • will-change
9

Des astuces fiables ?

  • Ombres de boîte : 2011
  • Flexbox : 2014
  • SVG: 2014
  • will-change : 2015
10

Des astuces fiables ?

  • Ombres de boîte : Firefox 7, Chrome 15
  • Flexbox : Firefox 26, Chrome 32
  • SVG : Firefox 33, Chrome 39
  • will-change : Firefox 39, Chrome 43
11

Comment évaluer ?

Apprendre :

1- Comment fonctionne un navigateur

2- Comment tester par soi-même

12

Disséquons un navigateur

Disséquons un navigateur

14

Layout

1- layout : calcule la taille et la position de chaque noeud

Le layout est une étape bloquante.

15

Layout

http://pixeln3rd.github.io/cssreflow/ 16

Paint

2- paint : calcule chaque pixel pour chaque noeud

Les données sont alors chargées dans la carte graphique.

17

Composition

3- composition : affichage des pixels à l'écran

Une étape plutôt rapide !

18

Exemple

Lors d'une transition sur width, on déclenche un layout.

Ce sera difficile pour le navigateur !

https://csstriggers.com/ 19

Exemple

Lors d'une transition sur transform, c'est une composition.

Ce sera facile pour le navigateur !

https://csstriggers.com/ 20

Transitions

La composition, c'est seulement 3 propriétés possibles :

1- opacity

2- transform

3- filter

21

CSS filters

filter est supporté par tous les navigateurs récents !

CSS Filters Playground 22

Attraper les repaints

Attraper les tous...

Pourquoi les repaints ?

On peut identifier les layouts et les paints grâce aux Dev Tools.

Les outils pour les paints sont plus visuels !

24

Dev Tools Chrome

https://peertube.xyz/videos/watch/fd31b24e-72c7-4293-adba-8fb130a036ad 25

Dev Tools Firefox

https://peertube.xyz/videos/watch/970bc78a-5335-4913-83ee-06919ed2ce2e 26

Recettes de grand-mères

ou non ?

will-change

C'est encore utile pour Chrome,
mais plus pour Firefox.

28

SVG

On peut faire des transformations sur les SVG,
mais pas sur un sous-élément.

https://bugs.chromium.org/p/chromium/issues/detail?id=688243 29

Flexbox

Flexbox n'est pas lent,
mais c'était vrai de la première syntaxe.

https://developers.google.com/web/updates/2013/10/Flexbox-layout-isn-t-slow 30

Ombre de boîte

Les ombres portées ne sont pas redessinées au défilement,
mais cette histoire était à propos des Chromebook.

31

Conclusion

Il faut tester et ne croire personne !

(même pas moi)

Merci !

Des questions ?

@iamtzi
https://tzi.fr/slides/speed2018
https://tzi.fr/slides/speed2018.pdf

33