---
title: Navigation Timing API
slug: Web/API/Navigation_timing_API
tags:
  - API
  - Client side performance
  - Navigation Timing
  - Performance
  - Производительность
translation_of: Web/API/Navigation_timing_API
---
<p>{{DefaultAPISidebar("Navigation Timing")}}</p>

<p><strong>Navigation Timing API </strong>предоставляет данные, которые могут быть использованы для измерения производительности веб-сайта. В отличие от других механизмов на основе JavaScript, которые были использованы с той же целью, этот API может предоставить полную и точную информацию о задержке в получении данных. </p>

<p>Следующий пример демонстрирует как можно измерить время загрузки страницы с точки зрения пользователя:</p>

<pre>function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}
</pre>

<p>Есть много событий, измеренных в миллисекундах, которые могут быть доступны через {{domxref("PerformanceTiming")}} интерфейс. Список событий в хронологическом порядке:</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>Объект <code>window.performance.navigation</code> хранит два атрибута, которые могут быть использованы, для определения была ли страница загружена в последствии перенаправления, использования навигации по страницам в браузере или обычной загрузки по ссылке.</p>

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

<table class="standard-table" style="font-size: 14px;">
 <thead>
  <tr>
   <th scope="col">Флаг</th>
   <th scope="col">Значение</th>
   <th scope="col">Описание</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a name="const_next"><code>TYPE_NAVIGATE</code></a></td>
   <td>0</td>
   <td>Навигация началась после нажатия на ссылку, ввода URL в адресную строку браузера, подтверждения формы или после выполнения действия, отличного от действий описанных в флагах TYPE_RELOAD и TYPE_BACK_FORWARD.</td>
  </tr>
  <tr>
   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
   <td>1</td>
   <td>Навигация путем перегрузки страницы или выполнения метода location.reload().</td>
  </tr>
  <tr>
   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
   <td>2</td>
   <td>Навигация по истории переходов по страницам в браузере.</td>
  </tr>
  <tr>
   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
   <td>255</td>
   <td>Любой другой тип навигации не описанный выше.</td>
  </tr>
 </tbody>
</table>

<p><code>window.performance.navigation.redirectCount</code> отображает количество переадресаций до последней страницы, если они происходили.</p>

<p>Navigation Timing API может быть использован для сбора данных о производительности на стороне клиента при отправке ассинхронных запросов на сервер, а также для получения данных, которые нельзя получить с помощью других средств, таких как время выгрузки предыдущей страницы, время DNS запроса, время полной загрузки страницы.</p>

<h2 id="Примеры">Примеры</h2>

<p>Вычисление времени полной загрузки страницы:</p>

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

<p>Вычисление времени выполнения запроса:</p>

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

<h3 id="Browser_Compatibility" name="Browser_Compatibility">Ссылки</h3>

<ul>
 <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">Совместимость с браузерами</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>Основная поддержка</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>Основная поддержка</td>
   <td>4.0</td>
   <td>{{ CompatGeckoDesktop("15") }}</td>
   <td>9</td>
   <td>15.0</td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</div>