--- 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/">http://www.w3.org/TR/navigation-timing/</a></li> </ul> <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> <p>{{Compat("api.PerformanceTiming")}}</p>