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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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>
|
