files/fr/conflicting/tools/performance/waterfall/index.html


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

---
title: Frise chronologique
slug: conflicting/Tools/Performance/Waterfall
tags:
  - Gecko
  - Guide
  - Tools
translation_of: Tools/Performance/Waterfall
translation_of_original: Tools/Timeline
original_slug: Outils/Frise_chronologique
---
<div>{{ToolsSidebar}}</div><p>La frise chronologique suit à la trace les opérations réalisées par Gecko, le moteur du navigateur.Il faut aller dans les <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">the devtools options des outils de developemment</a> pour activer la frise chronologique.</p>

<p>Pour le moment, la frise chronologique couvre les éléments suivants :</p>

<ul>
 <li><em>reflows</em> (aussi appelés <em>Layout</em>) : Le moteur a calculé la géométrie d'un ou plusieurs nœuds.</li>
 <li><em>restyle </em>: le style a été recalculé.</li>
 <li><em>paint </em>: une partie de la page a été redessinée.</li>
 <li><em>console </em>: appels à la fonction <code>console.time(label)</code> et/ou <code>console.timeEnd(label)</code>;</li>
 <li><a href="/fr/docs/Web/Events"><em>Éènements DOM</em></a> : les évènements tel que "click", "input", "keydown" etc...</li>
</ul>

<p>Les opérations reflows, restyle et paint ont lieu dans le "thread" principal et peut retarder ou être retardé à cause des opérations lentes (reflows, exécution de script, beaucoup de restyle, etc...).</p>

<p><img alt="Timeline Screenshot" src="https://mdn.mozillademos.org/files/8883/timeline.png" style="height: 728px; width: 879px;"></p>