path: root/files/fr/tools/performance/waterfall/index.html

---
title: Chronologie
slug: Outils/Performance/Waterfall
translation_of: Tools/Performance/Waterfall
---
<div>{{ToolsSidebar}}</div>

<div class="summary">
<p>La chronologie vous donne des indications sur les opérations qu'effectue le navigateur lorsqu'il fait tourner une page web ou une application. Cet outil se base sur l'idée que les opérations qu'effectue un navigateur peuvent être divisées en plusieurs types : exécution du JavaScript, mise à jour du layout, et ainsi de suite... Ainsi que l'idée qu'à n'importe quel point donné dans le temps, le navigateur effectue l'une ou l'autre de ces actions.</p>

<p>Donc, si vous voyez un problème de performance - une chute du frame rate par exemple - vous pouvez utiliser la chronologie pour voir ce que le navigateur faisait à ce moment de l'enregistrement.</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>

<p>L'axe X représente le temps. Les opérations enregistrées, appelées marqueurs sont affichées sous la forme de barres de couleur horizontales. Ces marqueurs sont disposés en cascade pour refléter le caractère séquentiel de l'exécution du navigateur.</p>

<p>Lorsqu'un marqueur est sélectionné, des informations supplémentaires sur celui-ci s'affichent dans le panneau de droite. Ces informations intègrent la durée du marqueur et quelques informations spécifiques de son <a href="/fr/docs/Tools/Performance/Waterfall#Marqueurs">type</a>.</p>

<h2 id="Marqueurs"><a id="timeline-color-coding" name="timeline-color-coding"></a>Marqueurs</h2>

<p>Les marqueurs possèdent un code couleur et un libellé. Les opérations suivantes sont enregistrées :</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col" style="width: 20%;">Nom et description</th>
   <th scope="col">Couleur</th>
   <th scope="col">Informations détaillées</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="width: 40%;">
    <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>Évènements DOM</strong></a></p>

    <p>Le code JavaScript qui est exécuté en réponse à un évènement DOM.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td style="width: 45%;">
    <dl>
     <dt>Type de l'évènement</dt>
     <dd>Par exemple, "click" ou "message".</dd>
    </dl>

    <dl>
     <dt>Phase de l'évènement</dt>
     <dd>Par exemple "Target" ou "Capture".</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p>Les fonctions JavaScript exécutées dans la page ont le libellé de la raison pour laquelle la fonction a été appelée :</p>

    <p><strong>Script Tag<br>
     setInterval<br>
     setTimeout<br>
     requestAnimationFrame<br>
     Promise Callback<br>
     Promise Init<br>
     Worker<br>
     JavaScript URI<br>
     Event Handler</strong></p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Pile</dt>
     <dd>La pile d'appels avec des liens vers les fonctions.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Parse HTML</strong></p>

    <p>Le temps passé à parser le HTML de la page.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Pile</dt>
     <dd>La pile d'appels avec des liens vers les fonctions.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Parse XML</strong></p>

    <p>Le temps passé à parser le XML de la page.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Pile</dt>
     <dd>La pile d'appels avec des liens vers les fonctions.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Recalcul des styles</strong></p>

    <p>Le calcul des styles qui s'appliquent aux éléments de la page.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Causes du recalcul</dt>
     <dd>Une chaine de caractères indiquant quel type de recalcul est nécessaire. Elle peut prendre les valeurs suivantes :<br>
     Self<br>
     Subtree<br>
     LaterSiblings<br>
     CSSTransitions<br>
     CSSAnimations<br>
     SVGAttrAnimations<br>
     StyleAttribute<br>
     StyleAttribute_Animations<br>
     Force<br>
     ForceDescendants</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Layout</strong></p>

    <p>Le calcul des positions et de la taille des éléments de la page. Cette opération est parfois appelée "reflow".</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
   <td> </td>
  </tr>
  <tr>
   <td>
    <p><strong>Paint</strong></p>

    <p>Affichage des pixels à l'écran</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td>
   <td> </td>
  </tr>
  <tr>
   <td>
    <p><strong>Ramasse-miettes</strong></p>

    <p><a href="/fr/docs/Tools/Performance/Waterfall#Garbage_collection">évènement de garbage collection</a>. Les évènements GC non incrémentaux sont nommés "non incrémentiel".</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Raison</dt>
     <dd>Une chaine de caractères indiquant la raison pour laquelle le ramasse-miettes a été effectué.</dd>
     <dt>Raison du cycle non incrémentiel</dt>
     <dd>Si l'évènement n'était pas incrémentiel, une chaine expliquant pourquoi la GC a été effectuée.</dd>
     <dt> </dt>
     <dd>
     <div class="geckoVersionNote">
     <p>Nouveau dans Firefox 46: Si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement.</p>

     <p>Voir <a href="/fr/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations et Ramasse-miettes</a> pour plus d'informations.</p>
     </div>
     </dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Cycle Collection</strong></p>

    <p>Récupération des structures de données C++ qui sont en <a href="https://en.wikipedia.org/wiki/Reference_counting">"reference-count"</a></p>

    <p>Semblable au ramasse-miette, mais pour les objets C++. Voir <a href="http://blog.kylehuey.com/post/27564411715/cycle-collection">l'article de blog de Kyle Huey sur le cycle collection</a>.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt><strong>Type</strong></dt>
     <dd>Toujours "Collect"</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Réduction d'arbre de ramasse-miettes</strong></p>

    <p>Préparation/préoptimisation pour le Cycle Collection.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
   <td><span style="display: none;"> </span>
    <p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><strong>Type</strong></p>
    <span style="display: none;"> </span>

    <dl>
     <dd>Toujours "ForgetSkippable".</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Console</strong></p>

    <p>La période entre les appels à <code>console.time()</code> et <code>console.timeEnd()</code>.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Nom du timer</dt>
     <dd>L'argument passé aux fonctions <code>console</code>.</dd>
     <dt>Pile au début</dt>
     <dd>La pile d'appels <code>à console.time()</code>, avec des liens vers les fonctions.</dd>
     <dt>Pile de fin</dt>
     <dd>(Nouveau dans Firefox 41). La pile d'appels <code>console.timeEnd()</code>. S'il s'agit d'un appel dans un callback de <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, cela montrera également la <a href="/fr/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a>.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Timestamp</strong></p>

    <p>Un appel unique à <code><a href="/fr/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Label</dt>
     <dd>L'argument passé à <code>timeStamp()</code>.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>DOMContentLoaded</strong></p>

    <p>L'évènement <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> du document</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td>
   <td> </td>
  </tr>
  <tr>
   <td>
    <p><strong>Load</strong></p>

    <p>L'évènement <code><a href="/en-US/docs/Web/Events/load">load</a></code> du document.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td>
   <td> </td>
  </tr>
  <tr>
   <td>
    <p><strong>Évènement dans le thread principal du worker</strong></p>

    <p>Affiché lorsque le thread principal envoie un message à un worker, ou reçoit un message d'un worker.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td>
   <td>
    <p>Un parmi :</p>

    <dl>
     <dt>Sérialisation des données sur le thread principal</dt>
     <dd>Le thread principal sérialise un message pour l'envoyer au worker</dd>
     <dt>Déserialisation des données sur le thread principal</dt>
     <dd>Le thread principal désérialise un message pour l'envoyer au worker</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Worker event in worker thread</strong></p>

    <p>Affiché lorsque le worker  envoie un message à un worker, ou reçoit un message du thread principal.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td>
   <td>
    <p>Un parmi :</p>

    <dl>
     <dt>Serialisation des données dans le Worker</dt>
     <dd>Le worker sérialise un message pour l'envoyer au thread principal</dd>
     <dt>Déserialisation des données dans le Worker</dt>
     <dd>Le worker désérialise un message pour l'envoyer au thread principal</dd>
    </dl>
   </td>
  </tr>
 </tbody>
</table>

<p>Les marqueurs et leurs couleurs sont les mêmes dans la chronologie que dans la <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble de la chronologie</a>.</p>

<h3 id="Filtrer_les_marqueurs">Filtrer les marqueurs</h3>

<p>Il est possible de contrôler quels marqueurs sont affichés en utilisant le bouton dans la <a href="/fr/docs/Tools/Performance/UI_Tour#Toolbar">barre d'outils </a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p>

<h2 id="Motifs_de_la_chronologie">Motifs de la chronologie</h2>

<p>Le contenu de l´enregistrement dépend énormément des opérations réalisées par le site : Les sites utilisant beaucoup de JavaScript auront un profil à dominance orange, alors que les sites à contenu visuel dynamique auront beaucoup de violet et de vert. Cependant certains motifs communs peuvent vous indiquer de possibles problèmes de performance.</p>

<h3 id="Chronologie_de_rendu">Chronologie de rendu</h3>

<p>Le motif suivant est très courant dans la vue de la chronologie :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p>

<p>C'est une visualisation de l´algorithme de base qu'utilise le navigateur pour mettre à jour la page en réponse à un évènement :</p>

<ol>
 <li><strong>JavaScript Function Call</strong>: Un évènement quelconque - par exemple un évènement DOM - a pour effet de lancer du JavaScript. Le code change du DOM ou du CSSOM.</li>
 <li><strong>Recalculate Style</strong>: Si le navigateur pense que des styles calculés de la page ont changé, il les recalcule.</li>
 <li><strong>Layout</strong>: Puis, le navigateur utilise les styles calculés pour déterminer la position et la géométrie des éléments. Cette opération est étiquetée "layout", mais on l'appelle aussi « reflow ».</li>
 <li><strong>Paint</strong>: Enfin, le navigateur a besoin de réafficher les éléments à l'écran. Une dernière étape n'est pas représentée dans cette séquence: La page peut être divisée en couches, qui sont affichées indépendamment puis assemblées lors d'un processus appelé "Composition".</li>
</ol>

<p>Cette séquence doit se terminer en une seule image, puisque l'écran n'est pas mis à jour avant qu'elle soit terminée. Il est communément admis que 60 images/secondes est la vitesse à laquelle les animations apparaîtront fluides. Pour un taux de 60 images/secondes, cela laisse au navigateur 16,7 millisecondes pour exécuter le flow complet.</p>

<p>Il est important pour la réactivité à ce que le navigateur n´ait pas à passer par toutes ces étapes à chaque fois :</p>

<ul>
 <li><a href="/fr/docs/Web/Guide/CSS/Using_CSS_animations">Les animations CSS</a> mettent à jour la page sans avoir besoin d'exécuter du JavaScript.</li>
 <li>Toutes les propriétés CSS modifiées ne causent pas de « reflow ». Modifier des propriétés qui changent la position ou la géométrie d'un objet, telles que <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/display">display</a></code>, <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, ou <code><a href="/fr/docs/Web/CSS/top">top</a></code>, provoqueront un « reflow ». Par contre, modifier des propriétés qui ne changent par la géométrie ou le positionnement, telles que <code><a href="/fr/docs/Web/CSS/color">color</a></code> ou <code><a href="/fr/docs/Web/CSS/opacity">opacity</a></code>, n'en feront rien.</li>
 <li>Toutes les propriétés CSS modifiées n'amènent pas à un repaint. En particulier, si vous animez un élément en utilisant la propriété <code><a href="/fr/docs/Web/CSS/transform">transform</a></code>, le navigateur utilisera une couche séparée pour l'élément transformé, et n'aura peut-être même pas à faire un repaint si l'élément est déplacé : Sa nouvelle position est traitée dans la composition.</li>
</ul>

<p>L'article <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animer des propriétés CSS </a>montre qu'animer différentes propriétés CSS peut donner des résultats de performance différents, et comment la chronologie peut aider à le voir.</p>

<h3 id="JavaScript_bloquant">JavaScript bloquant</h3>

<p>Par défaut, le JavaScript des pages web est exécuté sur le même thread que celui que le navigateur utilise pour les mises à jour de layout, les repaints, les évènements DOM et ainsi de suite. Cela signifie que des fonctions JavaScript qui mettent longtemps à s´exécuter peuvent causer des ralentissements (jank). Les animations ne seront pas fluides et le site pourra même freezer.</p>

<p>En utilisant l'outil frame rate et la « chronologie », il est facile de voir lorsque des fonctions JavaScript posent problème. Dans la capture d´écran ci-dessous, un zoom a été fait sur une fonction JS qui cause une chute du frame rate :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p>

<p>L'article <a href="/fr/docs/Tools/Performance/Scenarios/Intensive_JavaScript">JavaScript Intensif</a> montre comment la « chronologie » peut mettre en évidence les problèmes de réactivité causés par des fonctions JavaScript trop gourmandes, et comment utiliser des méthodes asynchrones pour garder le thread principal réactif.</p>

<h3 id="«_Décorations_»_coûteuses">« Décorations » coûteuses</h3>

<p>Certains effets tels que <code><a href="/fr/docs/Web/CSS/box-shadow">box-shadow</a></code>, peuvent être coûteux ; surtout lors de transitions où le navigateur doit recalculer cet effet à chaque image. Si vous remarquez des chutes de frame rate surtout lors d'opérations et transitions graphiques couteuses, recherchez les longs marqueurs verts (repaint) dans la chronologie.</p>

<h3 id="Ramasse-miettes_(Garbage_Collection)">Ramasse-miettes (Garbage Collection)</h3>

<p>Les marqueurs rouges dans la chronologie représentent le passage du ramasse-miettes (GC), pour lequel <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (le moteur JavaScript de Firefox) parcourt la pile à la recherche d´éléments en mémoire qui ne sont plus accessible pour les libérer. La GC est un indice de performance, car lorsqu’elle « tourne », le moteur JavaScript doit être en pause et donc le programme est mis en pause et ne répondra pas.</p>

<p>Pour aider à réduire la durée de ces pauses, SpiderMonkey implémente une <em>GC</em> morcelée. Cela signifie qu´il peut faire de la garbage collection par petites « passes », permettant au programme de tourner entre celles-ci. Parfois, le moteur à besoin de réaliser une garbage collection complète et non par morceaux et alors, le programme a besoin d'attendre la fin de cette opération.</p>

<p>Pour essayer d’éviter les évènements GC et surtout les passages complets, il est sage de ne pas essayer d'optimiser pour l'implémentation spécifique du moteur JavaScript. SpiderMonkey utilise un ensemble complexe <span class="tag_lemma"><span class="dictTerm">d'heuristiques pour déterminer quand la GC est nécessaire, et quand une GC non incrémentale en particulier est nécessaire. En général cependant :</span></span></p>

<ul>
 <li>La GC est nécessaire lorsque beaucoup de mémoire est allouée.</li>
 <li>La GC complète est généralement nécessaire lorsque le taux d'allocation mémoire est assez haut pour que SpiderMonkey puisse être à court de mémoire durant une GC morcelée.</li>
</ul>

<p>Lorsque la Chronologie enregistre un marqueur GC, cela indique :</p>

<ul>
 <li>Si le ramasse-miettes passait de manière morcelée ou pas.</li>
 <li>La raison de l'événement GC qui a eu lieu.</li>
 <li>Si la passe du ramasse-miettes était complète, et la raison pour laquelle elle l'était.</li>
 <li>Depuis de Firefox 46, si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement. Voir <a href="/fr/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations et Ramasse-miettes</a> pour plus d'informations.</li>
</ul>

<h2 id="Ajouter_des_marqueurs_avec_la_console_API">Ajouter des marqueurs avec la console API</h2>

<p>Deux marqueurs peuvent être contrôlés par des appels à la <a href="/fr/docs/Web/API/Console">console API</a> : "Console" et "Timestamp".</p>

<h3 id="Marqueurs_de_console">Marqueurs de console</h3>

<p>Ces marqueurs permettent de marquer une section spécifique de l'enregistrement.</p>

<p>Pour faire un marqueur console, il faut appeler<code> console.time()</code> au début d'une section, et <code>console.timeEnd()</code> à la fin. Ces fonctions prennent un argument qui est le nom de la section.</p>

<p>Par exemple si nous avons un code comme ceci :</p>

<pre class="brush: js">var iterations = 70;
var multiplier = 1000000000;

function calculatePrimes() {

  console.time("calculating...");

  var primes = [];
  for (var i = 0; i &lt; iterations; i++) {
    var candidate = i * (multiplier * Math.random());
    var isPrime = true;
    for (var c = 2; c &lt;= Math.sqrt(candidate); ++c) {
      if (candidate % c === 0) {
          // not prime
          isPrime = false;
          break;
       }
    }
    if (isPrime) {
      primes.push(candidate);
    }
  }

  console.timeEnd("calculating...");

  return primes;
}</pre>

<p>La sortie de la Chronologie ressemblera à ceci :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p>

<p>Le marqueur est nommé par l'argument passé à <code>console.time()</code>, et lorsque le marqueur est sélectionné, il est possible de voir la pile du programme dans l'encadré sur le coté droit.</p>

<h4 id="Tache_Async">Tache Async</h4>

<p class="geckoVersionNote">Nouveau dans Firefox 41.</p>

<p>À partir de Firefox 41, l'encadré de droite affichera également la stack à la fin de la période. C´est à dire au moment où <code>console.timeEnd()</code> a été appelé. Si <code>console.timeEnd()</code> a été appelé par la résolution d'une <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, l'encadré affichera également le label "(Async: Promise)", sous lequel sera affiché la "async stack" : Il s'agit de la pile d'appels au moment où la promise a été faite.</p>

<p>Par exemple, avec ce code :</p>

<pre class="brush: js">var timerButton = document.getElementById("timer");
timerButton.addEventListener("click", handleClick, false);

function handleClick() {
  console.time("timer");
  runTimer(1000).then(timerFinished);
}

function timerFinished() {
  console.timeEnd("timer");
  console.log("ready!");
}

function runTimer(t) {
  return new Promise(function(resolve) {
    setTimeout(resolve, t);
  });
}</pre>

<p>La Chronologie affichera un marqueur pour la période entre <code>time()</code> et <code>timeEnd()</code>, et s’il est sélectionné, la pile async apparaitra dans l'encadré :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p>

<h3 id="Marqueurs_de_temps">Marqueurs de temps</h3>

<p>Les Timestamps permettent de marquer un instant dans l'enregistrement.</p>

<p>Pour faire un timestamp, il faut appeler <code><a href="/fr/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>. Il est possible de passer un argument pour nommer le timestamp.</p>

<p>Par exemple, supposons que nous adaptions le code au-dessus pour faire un timestamp toutes les 10 itérations de la boucle ayant pour nom le nombre de l'itération :</p>

<pre class="brush: js">var iterations = 70;
var multiplier = 1000000000;

function calculatePrimes() {
  console.time("calculating...");

  var primes = [];
  for (var i = 0; i &lt; iterations; i++) {

    if (i % 10 == 0) {
      console.timeStamp(i.toString());
    }

    var candidate = i * (multiplier * Math.random());
    var isPrime = true;
    for (var c = 2; c &lt;= Math.sqrt(candidate); ++c) {
      if (candidate % c === 0) {
          // not prime
          isPrime = false;
          break;
       }
    }
    if (isPrime) {
      primes.push(candidate);
    }
  }
  console.timeEnd("calculating...");
  return primes;
}</pre>

<p>Dans la Chronologie, vous verrez quelque chose comme ceci :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p>