1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
title: Outil de mise en surbrillance des zones repeintes
slug: Tools/Paint_Flashing_Tool
translation_of: Tools/Paint_Flashing_Tool
original_slug: Outils/Paint_Flashing_Tool
---
<div>{{ToolsSidebar}}</div>
<p>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.</p>
<h2 id="Les_Repaints_et_la_réactivité">Les Repaints et la réactivité</h2>
<p>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 <a href="/fr/docs/Web/CSS/:hover" title="/fr/docs/Web/CSS/:hover"><code>:hover</code></a> qui change le style de l'élément.</p>
<p>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.</p>
<p>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.</p>
<h2 id="Utiliser_l'outil_de_mise_en_surbrillance_des_zones_repeintes">Utiliser l'outil de mise en surbrillance des zones repeintes</h2>
<p>Ouvrir la <a href="/fr/docs/Tools_Toolbox" title="/fr/docs/Tools_Toolbox">Boite à outils</a>, puis cliquer sur l'icône nommée "afficher en surbrillance les zones repeintes" :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Après cela, les zones repeintes seront mises en surbrillance. Ainsi, après avoir bougé la souris et scrollé, la page ressemble à ceci :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">Dans cet exemple il y a deux sources de repaints principales :</p>
<ul>
<li>Survoler des liens avec la souris font que le navigateur les repeint, ceux-ci ont en effet la pseudo-classe <a href="/fr/docs/Web/CSS/:hover" title="/fr/docs/Web/CSS/:hover"><code>:hover</code></a>.</li>
<li>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.</li>
</ul>
<p>Pour désactiver l'outil, il faut cliquer à nouveau sur le bouton de la boite à outils.</p>
<h2 id="Exemple_transitions_CSS">Exemple : transitions CSS</h2>
<p>Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les <a href="/fr/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">transitions CSS</a>. 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 <a href="/fr/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété <a href="/fr/docs/Web/CSS/transform" title="/fr/docs/Web/CSS/transform"><code>transform</code></a>.</p>
<pre class="brush: html"><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>
</pre>
<pre class="brush: css">#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%);
}</pre>
<p>Pour voir la transition, placez la souris dans l'espace ce dessous :</p>
<p>{{ EmbedLiveSample('Exemple_transitions_CSS', 600, 300) }}</p>
<p>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 "<code>transform</code>" ne cause qu'un repaint au début et à la fin.</p>
<p>Pourquoi ? Parce que lors de l'utilisation de <code>transform</code>, 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.</p>
<p>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.</p>
|
