performances de rendu css - tzi.fr · performances de rendu css #welovespeed. pour avoir une...

Performances de rendu

CSS

#WeLoveSpeed

Pour avoir une interface fluide :Lors du défilementLors des transitions et animations CSSLors de la manipulation de contenu

D'accord, mais pourquoi ?D'accord, mais pourquoi ?D'accord, mais pourquoi ?D'accord, mais pourquoi ?D'accord, mais pourquoi ?

2

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

Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?

CSS box-shadow can slow down scrolling 3

Thomas Zilliox

Expert CSS freelance

Auteur deDépart immédiat pour Flexbox

Qui suis-je ?Qui suis-je ?Qui suis-je ?Qui suis-je ?Qui suis-je ?

https://tzi.fr 4

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

Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?

Don't use flexbox for overall page layout 5

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

Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?

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

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

Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?Le saviez-vous ?

Fix scrolling performance with CSS will-change property 7

Des astuces �ablesou des recettes de grand-mères ?

Ombres de boîteFlexboxSVGwill-change

Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?

9

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

Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?

10

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

Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?Des astuces �ables ?

11

Apprendre :

1- Comment fonctionne un navigateur

2- Comment tester par soi-même

Comment évaluer ?Comment évaluer ?Comment évaluer ?Comment évaluer ?Comment évaluer ?

12

Disséquons un navigateur

Disséquons un navigateurDisséquons un navigateurDisséquons un navigateurDisséquons un navigateurDisséquons un navigateur

14

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

Le layout est une étape bloquante.

LayoutLayoutLayoutLayoutLayout

15

CSS Re�ow - Firefox Download Page

LayoutLayoutLayoutLayoutLayout

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

2- paint : calcule chaque pixel pour chaque noeud

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

PaintPaintPaintPaintPaint

17

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

Une étape plutôt rapide !

CompositionCompositionCompositionCompositionComposition

18

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

Ce sera difficile pour le navigateur !

ExempleExempleExempleExempleExemple

https://csstriggers.com/ 19

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

Ce sera facile pour le navigateur !

ExempleExempleExempleExempleExemple

https://csstriggers.com/ 20

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

1- opacity

2- transform

3- filter

TransitionsTransitionsTransitionsTransitionsTransitions

21

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

CSS �ltersCSS �ltersCSS �ltersCSS �ltersCSS �lters

CSS Filters Playground 22

Attraper les repaintsAttraper les tous...

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

Les outils pour les paints sont plus visuels !

Pourquoi les repaints ?Pourquoi les repaints ?Pourquoi les repaints ?Pourquoi les repaints ?Pourquoi les repaints ?

24

Chrome Dev Tools

Dev Tools ChromeDev Tools ChromeDev Tools ChromeDev Tools ChromeDev Tools Chrome

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

Firefox Dev Tools

Dev Tools FirefoxDev Tools FirefoxDev Tools FirefoxDev Tools FirefoxDev Tools Firefox

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

Recettes de grand-mèresou non ?

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

will-changewill-changewill-changewill-changewill-change

28

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

SVGSVGSVGSVGSVG

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

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

FlexboxFlexboxFlexboxFlexboxFlexbox

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

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

Ombre de boîteOmbre de boîteOmbre de boîteOmbre de boîteOmbre de boîte

31

ConclusionIl faut tester et ne croire personne !

(même pas moi)

Des questions ?

@iamtzihttps://tzi.fr/slides/speed2018

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

Merci !Merci !Merci !Merci !Merci !

33