From aa6d62755770ea262d25181ff5ae51c61033d18e Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 20 Jan 2022 10:18:22 +0800 Subject: mv to .md for web\api\navigator\sendbeacon --- .../zh-cn/web/api/navigator/sendbeacon/index.html | 95 ---------------------- files/zh-cn/web/api/navigator/sendbeacon/index.md | 95 ++++++++++++++++++++++ 2 files changed, 95 insertions(+), 95 deletions(-) delete mode 100644 files/zh-cn/web/api/navigator/sendbeacon/index.html create mode 100644 files/zh-cn/web/api/navigator/sendbeacon/index.md (limited to 'files/zh-cn/web/api') 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 ---- -
 {{APIRef("HTML DOM")}}
- -

navigator.sendBeacon() 方法可用于通过{{Glossary("HTTP")}}将少量数据异步传输到Web服务器。

- -

语法

- -
navigator.sendBeacon(url, data);
- -

参数

- -
-
url
-
url 参数表明 data 将要被发送到的网络地址。
-
- -
-
data
-
data 参数支持发送 {{domxref("ArrayBuffer")}} 、 {{domxref("ArrayBufferView")}} 、 {{domxref("Blob")}}、 {{domxref("DOMString")}} 、 {{domxref("FormData")}} 或者 {{domxref("URLSearchParams")}} 类型的数据。
-
- -

返回值

- -

当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

- -

描述

- -

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 {{event("unload")}} 事件处理器中产生的异步 {{domxref("XMLHttpRequest")}}。

- -

为了解决这个问题， 统计和诊断代码通常要在 unload 或者 {{event("beforeunload")}} 事件处理器中发起一个同步 XMLHttpRequest 来发送数据。同步的 XMLHttpRequest 迫使用户代理延迟卸载文档，并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力。

- -

有一些技术被用来保证数据的发送。其中一种是通过在卸载事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送。因为绝大多数用户代理会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。另一种技术是通过创建一个几秒钟的 no-op 循环来延迟卸载并向服务器发送数据。

- -

这些技术不仅编码模式不好，其中的一些甚至并不可靠而且会导致非常差的页面载入性能。

- -

下面的例子展示了一个理论上的统计代码——在卸载事件处理器中尝试通过一个同步的 XMLHttpRequest 向服务器发送数据。这导致了页面卸载被延迟。

- -
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);
-}
-
- -

这就是 sendBeacon() 方法存在的意义。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多！

- -

下面的例子展示了一个理论上的统计代码模式——通过使用 sendBeacon() 方法向服务器发送数据。

- -
window.addEventListener('unload', logData, false);
-
-function logData() {
-    navigator.sendBeacon("/log", analyticsData);
-}
-
- -

规范

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Initial definition
- -

浏览器兼容性

- - - -

{{Compat("api.Navigator.sendBeacon")}}

- -

相关链接

- - diff --git a/files/zh-cn/web/api/navigator/sendbeacon/index.md b/files/zh-cn/web/api/navigator/sendbeacon/index.md new file mode 100644 index 0000000000..13158ebca2 --- /dev/null +++ b/files/zh-cn/web/api/navigator/sendbeacon/index.md @@ -0,0 +1,95 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon +tags: + - API + - Beacon + - Web Performance + - sendBeacon +translation_of: Web/API/Navigator/sendBeacon +--- +
 {{APIRef("HTML DOM")}}
+ +

navigator.sendBeacon() 方法可用于通过{{Glossary("HTTP")}}将少量数据异步传输到Web服务器。

+ +

语法

+ +
navigator.sendBeacon(url, data);
+ +

参数

+ +
+
url
+
url 参数表明 data 将要被发送到的网络地址。
+
+ +
+
data
+
data 参数支持发送 {{domxref("ArrayBuffer")}} 、 {{domxref("ArrayBufferView")}} 、 {{domxref("Blob")}}、 {{domxref("DOMString")}} 、 {{domxref("FormData")}} 或者 {{domxref("URLSearchParams")}} 类型的数据。
+
+ +

返回值

+ +

当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

+ +

描述

+ +

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 {{event("unload")}} 事件处理器中产生的异步 {{domxref("XMLHttpRequest")}}。

+ +

为了解决这个问题， 统计和诊断代码通常要在 unload 或者 {{event("beforeunload")}} 事件处理器中发起一个同步 XMLHttpRequest 来发送数据。同步的 XMLHttpRequest 迫使用户代理延迟卸载文档，并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力。

+ +

有一些技术被用来保证数据的发送。其中一种是通过在卸载事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送。因为绝大多数用户代理会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。另一种技术是通过创建一个几秒钟的 no-op 循环来延迟卸载并向服务器发送数据。

+ +

这些技术不仅编码模式不好，其中的一些甚至并不可靠而且会导致非常差的页面载入性能。

+ +

下面的例子展示了一个理论上的统计代码——在卸载事件处理器中尝试通过一个同步的 XMLHttpRequest 向服务器发送数据。这导致了页面卸载被延迟。

+ +
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);
+}
+
+ +

这就是 sendBeacon() 方法存在的意义。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多！

+ +

下面的例子展示了一个理论上的统计代码模式——通过使用 sendBeacon() 方法向服务器发送数据。

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.Navigator.sendBeacon")}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf