Performances de rendu CSS - tzi.fr · Performances de rendu CSS #WeLoveSpeed. Pour avoir une...
Transcript of 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