---
title: Navigation Timing
slug: Web/API/Navigation_timing_API
tags:
  - Web Performance API
translation_of: Web/API/Navigation_timing_API
---
<p>A <strong>API Navigation Timing</strong> fornece dados que podem ser usados para medir a performance de um website. Diferente de outros mecanismos baseados em Javascript que já foram usados para o mesmo propósito, esta API pode fornecer dados sobre a latência do começo ao fim que podem ser mais precisas e relevantes.</p>

<p>O exemplo a seguir mostra como você pode medir o tempo de carregamento percebido:</p>

<pre>function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("Tempo de carregamento percebido pelo usuário: " + page_load_time);
}
</pre>

<p>Existem muitos eventos medidos em milisegundos que podem ser acessados através da interface {{domxref("PerformanceTiming")}} interface. A lista de eventos na ordem em que ocorrem são:</p>

<ul>
 <li>navigationStart</li>
 <li>unloadEventStart</li>
 <li>unloadEventEnd</li>
 <li>redirectStart</li>
 <li>redirectEnd</li>
 <li>fetchStart</li>
 <li>domainLookupStart</li>
 <li>domainLookupEnd</li>
 <li>connectStart</li>
 <li>connectEnd</li>
 <li>secureConnectionStart</li>
 <li>requestStart</li>
 <li>responseStart</li>
 <li>responseEnd</li>
 <li>domLoading</li>
 <li>domInteractive</li>
 <li>domContentLoadedEventStart</li>
 <li>domContentLoadedEventEnd</li>
 <li>domComplete</li>
 <li>loadEventStart</li>
 <li>loadEventEnd</li>
</ul>

<p>O objeto <code>window.performance.navigation</code> guarda dois atributos que podem ser usados para saber se o carregamento da página é iniciada por um redirecionamento, pelo botão voltar/avançar ou pela URL mesmo.</p>

<p>window.performance.navigation.type:</p>

<table class="standard-table" style="font-size: 14px;">
 <thead>
  <tr>
   <th scope="col">Constante</th>
   <th scope="col">Valor</th>
   <th scope="col">Descrição</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a name="const_next"><code>TYPE_NAVIGATENEXT</code></a></td>
   <td>0</td>
   <td>Navegação iniciada pelo clique em um link, ou pela entrada da URL na barra de endereços, ou envio de formulário, ou inicializada através da operação de um script diferente que os usados por TYPE_RELOAD e TYPE_BACK_FORWARD como listado abaixo.</td>
  </tr>
  <tr>
   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
   <td>1</td>
   <td>Navegação através da operação de recarregamento ou pelo método location.reload().</td>
  </tr>
  <tr>
   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
   <td>2</td>
   <td>Navegação através de uma operação de histórico.</td>
  </tr>
  <tr>
   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
   <td>255</td>
   <td>Qualquer tipo de navegação não definida pelos valores acima.</td>
  </tr>
 </tbody>
</table>

<p><code>window.performance.navigation.redirectCount</code> indicará, se houver, quantos redirecionamentos aconteceram até que a página final seja alcançada.</p>

<p>A API Navigation Timing pode ser usada para colher dados da performance do lado do cliente enviado para um servidor via XHR tanto quanto os dados medidos que eram muito dificultosos de medir de outras maneiras como o tempo de "descarga" de uma página anterior, tempo de look up do dominio, tempo total do window.onload total time, etc.</p>

<h2 id="Exemplos">Exemplos</h2>

<p>Calculando o tempo total necessário para carregar uma página:</p>

<pre>var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
</pre>

<p>Calculando os tempos de resposta da requisição:</p>

<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre>

<h3 id="Browser_Compatibility" name="Browser_Compatibility">Links</h3>

<ul>
 <li><a class="external" href="http://webtimingdemo.appspot.com/" title="http://webtimingdemo.appspot.com/">Test Page</a></li>
 <li><a class="external" href="http://w3c-test.org/webperf/specs/NavigationTiming/" title="http://w3c-test.org/webperf/specs/NavigationTiming/">http://w3c-test.org/webperf/specs/NavigationTiming/</a></li>
 <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li>
</ul>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibillidade de Navegadores</h2>

<p>{{ CompatibilityTable }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>6.0</td>
   <td>{{ CompatGeckoDesktop("7") }}</td>
   <td>9</td>
   <td>15.0</td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>4.0</td>
   <td>{{ CompatGeckoDesktop("15") }}</td>
   <td>9</td>
   <td>15.0</td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</div>