Introduction
Si vous êtes du genre à vous tenir au courant de choses comme le fonctionnement des navigateurs, vous savez déjà qu'il y a eu récemment des articles incroyables détaillant l'opération de rendu/composite accélérée par GPU de Chrome. Tout d'abord, Accelerated Rendering in Chrome: The Layer Model (Rendu accéléré dans Chrome : le modèle de calque) est une excellente introduction à la façon dont Chrome utilise le concept de calques pour dessiner une page. Pour une présentation détaillée, GPU Accelerated Compositing in Chrome (Composition accélérée par GPU dans Chrome) explique comment Chrome utilise ces calques, ainsi que le GPU, pour afficher votre page.
La question philosophique
Après avoir passé beaucoup de temps à écrire des rastériseurs logiciels pour la 3D, il m'est apparu évident que certaines propriétés CSS devaient avoir des performances variables lors du dessin de votre page. Par exemple, la pixellisation d'une petite image à l'écran est une opération algorithmique complètement différente du dessin d'une ombre portée sur une forme arbitraire. La question est donc la suivante : comment les différentes propriétés CSS affectent-elles le poids de rendu de votre page ?
Mon objectif était de classer un grand nombre de propriétés/valeurs CSS en fonction de leur temps d'affichage, afin de comprendre quels types de propriétés CSS sont plus performants que d'autres. Pour ce faire, j'ai écrit un script d'automatisation avec les moyens du bord pour tenter d'ajouter une visibilité numérique aux temps de peinture CSS, qui fonctionnait comme suit :
- Générez une suite de pages HTML individuelles, chacune contenant un seul élément DOM et une permutation de propriétés CSS qui lui sont associées.
- Exécutez un script d'automatisation qui, pour chaque page :
- Lancez Chrome
- Charger une page
- Générer une image Skia pour la page
- Exécutez chaque image Skia prise via Skia Benchmark pour obtenir les temps d'exécution.
- Videz tous les timings et admirez les chiffres. (Cette partie est importante…)
Avec cette configuration, nous générons une suite de pages HTML, où chaque page contient une permutation unique de propriétés et de valeurs CSS. Par exemple, voici deux fichiers HTML :
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Et un autre, plus complexe
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Ci-dessous, une variante du dernier exemple, où nous ne modifions que la valeur radial-gradient :
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
Chaque page est ensuite chargée dans une nouvelle instance de Chrome (pour s'assurer que les temps de chargement ne sont pas biaisés par des états obsolètes lors de l'actualisation des pages), et une image Skia (*.SKP) est prise pour évaluer les commandes Skia utilisées pour afficher la page. Une fois les fichiers SKP générés pour chaque fichier HTML, nous exécutons un autre lot pour envoyer les fichiers *.SKP via l'application Skia Benchmark (créée à partir du code source Skia), qui indique le temps moyen nécessaire pour afficher cette page.
Évaluer les données
Nous pouvons désormais estimer approximativement le temps nécessaire pour afficher un ensemble de propriétés CSS. Ou plutôt, nous pouvons commencer à classer les propriétés CSS en fonction de leurs performances d'affichage. Voici un grand graphique réalisé avec Chrome 27 bêta, qui montre l'ensemble des données de chronométrage de ce processus. Notez que toutes les données sont susceptibles d'être modifiées, car Chrome devient de plus en plus rapide au fil du temps.
Chaque barre verticale représente le temps d'affichage d'une page avec une seule combinaison de propriétés CSS (agrandie 100 fois ; la valeur à l'échelle réelle de ce graphique est de 0,1,56 ms). Il y a beaucoup de jolies lignes, mais sous cette forme, elles sont un peu inutiles. Nous devons explorer les données pour trouver des tendances utiles.
Tout d'abord, nous constatons que certaines propriétés CSS sont tout simplement plus coûteuses à afficher que d'autres. Par exemple, dessiner une ombre portée sur un élément DOM implique une opération multipasse avec des splines et d'autres éléments complexes, contrairement à l'opacité, qui devrait être plus facile à afficher.
Deuxièmement, et plus intéressant encore, les combinaisons de propriétés CSS peuvent avoir un temps d'affichage supérieur à la somme de leurs parties. Du point de vue d'un observateur, cela peut sembler un peu étrange.On s'attendrait à ce que A + B = C, et non 2, 2 C. Par exemple, en ajoutant box-shadow et border-radius-stroke :
Ce qui est vraiment intéressant, c'est qu'il ne s'agit pas seulement de la propriété box-shadow elle-même, mais plutôt de cette permutation de valeur spécifique. Par exemple, l'image ci-dessous montre un regroupement de box-shadow : 50% et border-radius avec des variations de valeurs.
En examinant les données, on constate que cela dure un certain temps. Il existe de nombreuses combinaisons étranges, et ma suite de tests ne les couvre pas toutes. Il reste encore des tonnes de tests et de combinaisons qui pourraient donner des résultats intéressants.
Déterminer le poids de rendu de votre page
Grâce à la possibilité de suivre les délais d'affichage de chaque élément de votre page, les développeurs peuvent commencer à évaluer le poids de l'affichage de la page et son impact sur la réactivité de votre site. Voici quelques conseils pour commencer :
- Utilisez le mode Continuous Paint des outils pour les développeurs Chrome pour comprendre quelles propriétés CSS vous coûtent cher.
- Intégrez des examens CSS à votre processus d'examen de code existant pour détecter les problèmes de performances. Recherchez les endroits de votre CSS où vous utilisez des éléments connus pour être plus coûteux, comme les dégradés et les ombres. Posez-vous la question : ai-je vraiment besoin de ces éléments ici ?
- En cas de doute, privilégiez toujours de meilleures performances. Vos utilisateurs ne se souviendront peut-être pas de la largeur du remplissage de vos colonnes, mais ils se souviendront de ce qu'ils ont ressenti en visitant votre site.
Conclusions
L'un des aspects les plus intéressants de cette expérience est que les temps de chargement continueront de changer à chaque version de Chrome (en espérant qu'ils s'accélèrent ;). Le logiciel du navigateur est une surface en constante évolution. Ce qui est lent aujourd'hui peut être rapide demain. Vous pouvez supprimer cet article pour éviter de placer box-shadow: 1px 2px 3px 4px sur un élément qui comporte déjà border-radius:5. Toutefois, l'enseignement le plus important à retenir est que les propriétés CSS ont un impact direct sur les temps d'affichage de votre page.