aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/navigation_timing_api/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/web/api/navigation_timing_api/index.html')
-rw-r--r--files/ru/web/api/navigation_timing_api/index.html157
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>