mozilla

Comparaison de révisions

Console Web

Change Revisions

Révision 515111 :

Révision 515111 par sperling le

Révision 520881 :

Révision 520881 par milc le

Titre :
Console Web
Console Web
Identifiant d'URL :
Outils/Web_Console
Outils/Web_Console
Étiquettes :
"Tools", "Guide", "Console Web", "Firefox", "Web Development"
"Tools", "Guide", "Console Web", "Firefox", "Web Development"
Contenu :

Revision 515111
Revision 520881
n45        <a href="#message-display-pane" title="#message-display-pn45        <a href="#message-display-pane" title="#message-display-p
>ane">Panneau d'affichage des messages</a> : entre la barre d'outi>ane">Panneau d'affichage des messages</a> : entre la barre d'outi
>ls et la ligne de commande, et occupant la majeure partie de la C>ls et la ligne de commande, et occupant la majeure partie de la C
>onsole Web, se trouve l'espace servant à afficher les messages>onsole Web, se trouve l'espace servant à afficher les messages<br
 >>
46        &nbsp;
tt150    <p>
151      &nbsp;
152    </p>
153    <h3>
154      Les évènements de reflux
155    </h3>
156    <div class="geckoVersionNote">
157      <p>
158        Les reflux sont logués à partir de Firefox Desktop 27+ et
 > Firefox OS 1.3+.
159      </p>
160    </div>
161    <p>
162      La Console Web logue aussi les évènements de reflux. Un ref
 >lux est le nom donné à une opération pendant laquelle le navigate
 >ur calcule la disposition de tout ou partie de la page.<br>
163      Les reflux se produisent lorsqu'un changement est arrivé da
 >ns la page et que la navigateur pense qu'il en affecte la disposi
 >tion. Plusieurs évènements peuvent déclencher des reflux, incluan
 >t : redimensionner la fenêtre du navigateur, activer des pseudo-c
 >lasses comme :hover ou manipuler le DOM en JavaScript.<br>
164      <br>
165      Parce que les reflux peuvent très coûteux en calculs et aff
 >ecter directement l'interface utilisateur, ils peuvent avoir un g
 >rand impact sur la réactivité d'un site ou d'une application web.
 > En loguant les évènements de reflux, la Console Web peut vous do
 >nner une idée du moment ou les évènements de reflux sont déclench
 >és, combien de temps ils prennent à s'exécuter et, si les reflux 
 >sont des reflux synchrones déclenchés par du JavaScript, quel cod
 >e les a déclenchés.<br>
166      <br>
167      Les évènements de reflux sont logués dans la catégorie CSS,
 > en tant que messages "Log", bien séparés des erreurs et avertiss
 >ements CSS. Par défaut, ils sont désactivés. Vous pouvez les acti
 >ver en cliquant sur le bouton "CSS" dans la boîte à outils et en 
 >sélectionnant "Log".<br>
168      <br>
169      Chaque message porte une étiquette "reflow" et montre le te
 >mps qui a fallu pour exécuter le reflux :<br>
170      <br>
171      <img alt="" src="https://mdn.mozillademos.org/files/7087/we
 >b-console-reflow-asynch.png" style="width: 554px; height: 53px;">
 ><br>
172      Si le reflux est synchrone et a été déclenché depuis du Jav
 >aScript, un lien vers la ligne de code qui a déclenché le reflux 
 >est aussi affiché :
173    </p>
174    <p>
175      <img alt="" src="https://mdn.mozillademos.org/files/7089/we
 >b-console-reflow-synch.png"><br>
176      Cliquez sur le lien pour ouvrir le fichier dans le <a href=
 >"/en-US/docs/Tools/Debugger">Débogueur</a>.
177    </p>
178    <h4>
179      Reflux synchrones et asynchrones
180    </h4>
181    <p>
182      Si un changement est fait et qu'il invalide la disposition 
 >courante - par exemple, la fenêtre du navigateur est redimensionn
 >ée ou du JavaScript modifie le CSS d'un élément - la disposition 
 >n'est pas recalculée immédiatement. A la place, le reflux se prod
 >uit de façon asynchrone, lorsque le navigateur décide que c'est n
 >écessaire (en général, lorsque le navigateur <em>"repaints</em>")
 >. De cette façon, le navigateur peut enregistrer une série de cha
 >ngements invalidants et recalculer leurs effets en une seule fois
 >. Cependant, si du code Javascript lit un style qui a été modifié
 >, alors le navigateur doit réaliser un reflux asynchrone pour cal
 >culer le style calculé ("<em>computed style</em>") à retourner.
183    </p>
184    <p>
185      Par exemple, le code suivant provoque un reflux immédiat et
 > synchrone au moment de l'appel à window.getComputedStyle(thing).
 >height:
186    </p>
187    <pre>
188var thing = document.getElementById("the-thing");
189thing.style.display = "inline-block";
190var thingHeight = window.getComputedStyle(thing).height;
191</pre>
192    <p>
193      A cause de cela, c'est une bonne idée d'éviter l'entrelacem
 >ent des appels en écriture et en lecture des styles d'un élément 
 >lors de la manipulation du DOM, parce que chaque fois que vous re
 >lisez un style qui a été invalidé par un précédent appel en écrit
 >ure, vous forcez un reflux synchrone.
194    </p>

Retour à l'historique