diff options
author | allo <yin199909@aliyun.com> | 2022-01-20 10:18:22 +0800 |
---|---|---|
committer | Irvin <irvinfly@gmail.com> | 2022-02-15 22:04:41 +0800 |
commit | aa6d62755770ea262d25181ff5ae51c61033d18e (patch) | |
tree | ee456a28c61b4a3532bb489ecfdcbdca5ba12649 /files/zh-cn/web/api/navigator/sendbeacon/index.html | |
parent | 73dd03ffb8bf50ea4d269900958ec3ba949ae229 (diff) | |
download | translated-content-aa6d62755770ea262d25181ff5ae51c61033d18e.tar.gz translated-content-aa6d62755770ea262d25181ff5ae51c61033d18e.tar.bz2 translated-content-aa6d62755770ea262d25181ff5ae51c61033d18e.zip |
mv to .md for web\api\navigator\sendbeacon
Diffstat (limited to 'files/zh-cn/web/api/navigator/sendbeacon/index.html')
-rw-r--r-- | files/zh-cn/web/api/navigator/sendbeacon/index.html | 95 |
1 files changed, 0 insertions, 95 deletions
diff --git a/files/zh-cn/web/api/navigator/sendbeacon/index.html b/files/zh-cn/web/api/navigator/sendbeacon/index.html deleted file mode 100644 index 13158ebca2..0000000000 --- a/files/zh-cn/web/api/navigator/sendbeacon/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Navigator.sendBeacon() -slug: Web/API/Navigator/sendBeacon -tags: - - API - - Beacon - - Web Performance - - sendBeacon -translation_of: Web/API/Navigator/sendBeacon ---- -<div> {{APIRef("HTML DOM")}}</div> - -<p><code><strong>navigator.sendBeacon()</strong></code> 方法可用于通过{{Glossary("HTTP")}}将少量数据异步传输到Web服务器。</p> - -<h2 id="语法">语法</h2> - -<pre>navigator.sendBeacon(<em>url, </em><em>data</em>);</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>url</code></dt> - <dd><code>url</code> 参数表明 <code>data</code> 将要被发送到的网络地址。</dd> -</dl> - -<dl> - <dt><code>data</code></dt> - <dd><code>data</code> 参数支持发送 {{domxref("ArrayBuffer")}} 、 {{domxref("ArrayBufferView")}} 、 {{domxref("Blob")}}、 {{domxref("DOMString")}} 、 {{domxref("FormData")}} 或者 {{domxref("URLSearchParams")}} 类型的数据。</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<p>当用户代理成功把数据加入传输队列时,<strong><code>sendBeacon()</code></strong> 方法将会返回 <code>true</code>,否则返回 <code>false</code>。</p> - -<h2 id="描述">描述</h2> - -<p>这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 {{event("unload")}} 事件处理器中产生的异步 {{domxref("XMLHttpRequest")}}。</p> - -<p>为了解决这个问题, 统计和诊断代码通常要在 <code>unload</code> 或者 {{event("beforeunload")}} 事件处理器中发起一个同步 <code>XMLHttpRequest</code> 来发送数据。同步的 <code>XMLHttpRequest</code> 迫使用户代理延迟卸载文档,并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力。</p> - -<p>有一些技术被用来保证数据的发送。其中一种是通过在卸载事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送。因为绝大多数用户代理会延迟卸载以保证图片的载入,所以数据可以在卸载事件中发送。另一种技术是通过创建一个几秒钟的 no-op 循环来延迟卸载并向服务器发送数据。</p> - -<p>这些技术不仅编码模式不好,其中的一些甚至并不可靠而且会导致非常差的页面载入性能。</p> - -<p>下面的例子展示了一个理论上的统计代码——在卸载事件处理器中尝试通过一个同步的 <code>XMLHttpRequest</code> 向服务器发送数据。这导致了页面卸载被延迟。</p> - -<pre class="brush: js">window.addEventListener('unload', logData, false); - -function logData() { - var client = new XMLHttpRequest(); - client.open("POST", "/log", false); // 第三个参数表明是同步的 xhr - client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); - client.send(analyticsData); -} -</pre> - -<p>这就是 <strong><code>sendBeacon()</code></strong> 方法存在的意义。使用 <strong><code>sendBeacon() </code></strong>方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。此外,代码实际上还要比其他技术简单许多!</p> - -<p>下面的例子展示了一个理论上的统计代码模式——通过使用 <strong><code>sendBeacon()</code></strong> 方法向服务器发送数据。</p> - -<pre class="brush: js">window.addEventListener('unload', logData, false); - -function logData() { - navigator.sendBeacon("/log", analyticsData); -} -</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td> - <td>{{Spec2('Beacon')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Navigator.sendBeacon")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("navigator", "navigator")}}</li> -</ul> |