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
|
---
title: Beacon API
slug: Web/API/Beacon_API
tags:
- Beacon
- JSAPI Reference
- Производительность
translation_of: Web/API/Beacon_API
---
<div>{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}</div>
<p>Интерфейс <strong><code>Beacon</code></strong> используется для планирования асинхронного и неблокирующего запроса к веб-серверу. <strong><code>Beacon</code></strong> запросы используют метод HTTP POST, и обычно не требуют ответа. Запросы гарантированно будут инициированы до того, как страница будет выгружена, и они выполняются до конца, не требуя блокирующего запроса (например {{domxref("XMLHttpRequest")}}).</p>
<p>Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.</p>
<p>Пример кода интерфейсов, описанных в этом документе, включён в раздел <em><a href="/Web/API/Beacon_API/Using_the_Beacon_API">Использование Beacon API</a></em>.</p>
<h2 id="Зачем_использовать_Beacon">Зачем использовать Beacon?</h2>
<p>Интерфейс <code>Beacon</code> отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.</p>
<p>Пользовательские браузеры обычно игнорируют асинхронные {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создаёт синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. </p>
<p>Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путём создания элемента Image и установки его атрибута <code>src</code> в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.</p>
<p>Эти методы представляют плохие шаблоны программирования, некоторые из них ненадёжны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.</p>
<h2 id="Глобальный_контекст">Глобальный контекст</h2>
<p>Интерфейс <code>Beacon API's</code> предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки <em>beacon</em> данных на сервер в <em>глобальный браузерный контекст</em>. Метод принимает два аргумента: URL и данные для отправки в запросе. Аргумент data является необязательным, и его тип может быть {{domxref ("ArrayBufferView")}}, {{domxref ("Blob")}}, {{domxref ("DOMString")}} или {{domxref (" FormData ")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает <code>true</code> либо возвращает <code>false</code> в противном случае.</p>
<h2 id="Рабочий_контекст">Рабочий контекст</h2>
<p>Интерфейс <code>Beacon API's</code> предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки <em>beacon</em> данных на сервер из <em>{{domxref("WorkerGlobalScope","worker global scope")}}</em>. Метод принимает два аргумента: URL-адрес и данные для отправки в запросе. Аргумент <code>data</code> является необязательным, и его тип может быть {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает <code>true</code> либо возвращает <code>false</code> в противном случае.</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>The {{domxref("Navigator.sendBeacon","Navigator.sendBeacon()","Browser_compatibility")}} table indicates that method has relatively broad implementation.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref("WorkerGlobalScope")}}</li>
<li><a href="https://w3c.github.io/beacon/">Beacon standard</a></li>
<li><a href="http://caniuse.com/#search=beacon">Beacon CanIUse data</a></li>
<li><a href="https://ehsanakhgari.org/blog/2015-04-08/intercepting-beacons-through-service-workers">Intercepting beacons through service workers</a>; Ehsan Akhgari; 2015-Apr-08</li>
</ul>
|
