diff options
Diffstat (limited to 'files/ru/web/api/navigation_timing_api/index.html')
-rw-r--r-- | files/ru/web/api/navigation_timing_api/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/ru/web/api/navigation_timing_api/index.html b/files/ru/web/api/navigation_timing_api/index.html new file mode 100644 index 0000000000..81e84e72e6 --- /dev/null +++ b/files/ru/web/api/navigation_timing_api/index.html @@ -0,0 +1,157 @@ +--- +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> |