1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
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>{{Compat("api.PerformanceTiming")}}</p>
|
