L'outil de mise en surbrillance des zones repeintes lorsqu’il est activé met en surbrillance les parties de la page que le navigateur doit repeindre en réponse à un changement. Par exemple, lorsque l'utilisateur fait défiler, certains blocs vont être repeints. Avec l'aide de cet outil, il est possible de savoir si votre site web cause plus de repaint qu'il ne devrait. C'est important, car les repaints peuvent être des opérations très couteuses. Ainsi, éliminer les repaints inutiles peut améliorer la réactivité de votre site web.
Les Repaints et la réactivité
Lorsque le navigateur affiche une page web, il parse l'HTML et le CSS, détermine comment l'organiser et ensuite le peint pour pouvoir afficher du contenu sur l'écran. Lorsqu'un évènement qui peut changer une partie visible de la page se produit, le navigateur doit alors repeindre une partie de la page. Par exemple, un repaint sera nécessaire si l'utilisateur scrolle la page ou, place son curseur sur un élément disposant de la pseudo classe :hover qui change le style de l'élément.
Repeindre peut être une opération couteuse, le navigateur essaie donc de minimiser la partie à repeindre au maximum. Le navigateur essaie de trouver quelles parties de l'écran sont "endommagées" et ne repeint que celles-ci. Le navigateur sépare également le modèle de la page en couches qui vont à son avis être mises à jour indépendamment les unes des autres. Ainsi, le changement d'une couche n'oblige pas un repaint sur une autre couche, et lorsque le changement n'affecte qu'une relation entre deux couches (une animation par exemple) aucun repaint n'est nécessaire.
Les choix faits par un développeur web peuvent gêner le navigateur, lui imposant de faire plus de repaints et sur de plus grandes surfaces que nécessaire. Cela peut causer des pertes de réactivité dans les saisies utilisateur (aussi connu sous le nom de "janky"). C'est dans ces moments-là que l'outil de mise en surbrillance des zones repeintes s'avère utile : En montrant les zones que le navigateur repeint en réponse à un évènement, il est possible de voir s’il repeint plus que de raison.
Utiliser l'outil de mise en surbrillance des zones repeintes
Il deux moyens d'activer l'outil :
- Ouvrir la Boite à outils, puis cliquer sur l'icône nommée "afficher en surbrillance les zones repeintes" :
- Activer la Bare de développement (MAJ+F2) et taper "paintflashing on", puis presser entrée :
Après cela, les zones repeintes seront mises en surbrillance. Ainsi, après avoir bougé la souris et scrollé, la page ressemble à ceci :
Dans cet exemple il y a deux sources de repaints principales :
- Survoler des liens avec la souris font que le navigateur les repeint, ceux-ci ont en effet la pseudo-classe
:hover. - Scroller fait que le navigateur repeint la partie de la page qui deviens visible au bas de la page, et également la barre de défilement en haut à droite.
Pour désactiver l'outil, il faut cliquer à nouveau sur le bouton de la boite à outils ou taper "paintflashing off" dans la barre de développement.
Exemple : transitions CSS
Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les transitions CSS. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la margin-left de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété transform.
<body>
<div id="container">
<div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div>
<div class="moving-box" id="moving-box-transform">Transition utilisant transform</div>
</div>
</body>
#container {
border: 1px solid;
}
.moving-box {
height: 20%;
width:20%;
margin: 2%;
padding: 2%;
background-color: blue;
color: white;
font-size: 24px;
}
#moving-box-left-margin {
transition: margin-left 4s;
}
#moving-box-transform {
transition: transform 4s;
}
body:hover #moving-box-left-margin{
margin-left: 74%;
}
body:hover #moving-box-transform {
transform: translate(300%);
}
Pour voir la transition, placez la souris dans l'espace ce dessous :
Maintenant, activez l'outil puis essayez à nouveau. Il apparait alors que la version "margin-left" cause une série de repaints tout au long du déplacement de l'élément, alors que la version "transform" ne cause qu'un repaint au début et à la fin.
Pourquoi ? Parce que lors de l'utilisation de transform, le navigateur crée une couche séparée pour l'élément. Ainsi lorsque celui est déplacé, la seule chose qui est changée c'est la relation entre les deux couches, ce qui est géré lors de la composition. Ainsi, aucune des deux couches n'a besoin de repaint.
Dans ce cas, avec un style très simple, les différences de performance ne se font pas réellement ressentir. Cependant, si le style était couteux en performance, la différence pourrait être importante. Il est difficile de savoir quelles optimisations le navigateur fait pour économiser des repaints, et celles-ci peuvent changer d'une version à une autre. Ainsi tester votre site avec cet outil permet de s'assurer qu'il fonctionne toujours de façon optimale.