Performances : propriétés transformables et repeintes
Découvrez quelles propriétés sont accélérées par le GPU et lesquelles déclenchent des recalculs de mise en page coûteux.
Performances : propriétés transformables et repeintes est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
La chaîne de rendu
Les navigateurs effectuent le rendu en trois étapes : Mise en page (taille + position) → Peinture (pixels) → Composition (fusion des calques GPU). Animer des propriétés qui déclenchent les premières étapes coûte cher.
Propriétés déclenchant la mise en page
Modifier ces propriétés oblige le navigateur à recalculer la mise en page de toute la page, ou potentiellement d’une grande partie de celle-ci. Évitez de les animer :
width,heightmargin,paddingtop,leftfont-sizedisplay
Propriétés déclenchant la peinture
Ces propriétés évitent la mise en page, mais repeignent les pixels. Elles sont modérément coûteuses :
background-colorcolorbox-shadowborder
Propriétés réservées à la composition
Ces propriétés évitent à la fois la mise en page et la peinture : le navigateur doit seulement composer des calques pré-rasterisés. Elles sont très peu coûteuses et accélérées par le GPU :
transformopacity
Règle d’or des animations CSS
Pour des animations fluides à 60 images/s, animez uniquement transform et opacity. Utilisez transform: translate() plutôt que top/left, et opacity plutôt que des fondus basés sur display.
<div class="box demo-active">Box</div>Propriété de modification future
will-change indique au navigateur qu’il doit promouvoir un élément dans son propre calque GPU avant le début de l’animation, ce qui évite une « promotion éclair » au milieu de l’animation.
<div class="animated">Animated</div>Modification future : automatique
Définissez will-change: auto ou supprimez entièrement la propriété une fois les animations terminées. Promouvoir trop d’éléments gaspille la mémoire du GPU.
Mesurer avec DevTools
Utilisez l’onglet Performances de Chrome DevTools pour enregistrer et examiner le temps consacré à chaque image. L’onglet Rendu peut afficher les zones repeintes sous forme de clignotements (superposition verte), afin de montrer quels éléments sont repeints à chaque image.
Transformation plutôt que haut/gauche
L’optimisation la plus efficace consiste à remplacer les animations de positionnement par une transformation :
<div class="fly demo-active">Fly</div>Coût d’une transition de couleur
Les transitions de couleur d’arrière-plan déclenchent une nouvelle peinture, mais pas une nouvelle mise en page. Elles conviennent aux petits éléments. Pour les arrière-plans volumineux, envisagez plutôt un pseudo-élément avec une transition d’opacité :
<button class="btn demo-active">Hover me</button>Propriété de confinement
La propriété contain indique au navigateur qu’un élément et son sous-arbre sont indépendants. Cela limite la portée de l’invalidation de la mise en page et améliore les performances de peinture.
<div class="widget">Widget</div>Vérification rapide
Quelles sont les deux propriétés CSS qui peuvent être animées au stade de la composition sans déclencher de mise en page ni de peinture ?
Récapitulatif
Animer des propriétés de mise en page (largeur, position supérieure, marge) déclenche des recalculs coûteux. Les propriétés de peinture (couleur, arrière-plan) sont moins coûteuses. Seules la transformation et l’opacité s’animent au stade de la composition GPU sans déclencher de mise en page ni de peinture. Privilégiez toujours ces propriétés pour obtenir des animations fluides et performantes.
Questions Fréquemment Posées
La leçon « Performances : propriétés transformables et repeintes » est-elle gratuite ?
Oui — le texte complet de « Performances : propriétés transformables et repeintes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Performances : propriétés transformables et repeintes » ?
Découvrez quelles propriétés sont accélérées par le GPU et lesquelles déclenchent des recalculs de mise en page coûteux. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Performances : propriétés transformables et repeintes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Durée et temporisation des transitions
- Fonctions d’accélération : ease, linear, cubic-bezier
- Transition de plusieurs propriétés
- Performances : propriétés transformables et repeintes