navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。
它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest）发送分析数据的一些问题。
语法
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);
参数
url 参数表明 data 将要被发送到的网络地址。
data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据
返回值
当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。
描述
这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 [unload (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event "Currently only available in English (US)") 事件处理器中产生的异步 XMLHttpRequest。
过去，为了解决这个问题， 统计和诊断代码通常要在
- 发起一个同步 XMLHttpRequest 来发送数据。
- 创建一个
<img>元素并设置src，大部分用户代理会延迟卸载（unload）文档以加载图像。 - 创建一个几秒的 no-op 循环。
上述的所有方法都会迫使用户代理延迟卸载文档，并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力。
这就是 sendBeacon() 方法存在的意义。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能，这意味着
：
- 数据发送是可靠的。
- 数据异步传输。
- 不影响下一导航的载入。
数据是通过 HTTP POST 请求发送的。
使用Navigator.sendBeacon()
该Navigator.sendBeacon()函数专门用于发送单向请求（信标）。一个基本的实现看起来像这样，发送一个POST带有字符串化的 JSON 和一个“text/plain” Content-Type：
navigator.sendBeacon('/log', JSON.stringify({
some: "data"
}));
json
但是此 API 不允许您发送自定义标头。因此，为了让我们以“application/json”的形式发送数据，我们需要做一些小调整并使用Blob：
<a href="/some-other-page" id="link">Go to Page</a>
<script>
document.getElementById('link').addEventListener('click', (e) => {
const blob = new Blob([JSON.stringify({ some: "data" })], { type: 'application/json; charset=UTF-8' });
navigator.sendBeacon('/log', blob));
});
</script>
最后，我们得到了相同的结果——即使在页面导航之后也允许完成的请求。但是还有更多的事情可能会使其具有优势fetch()：信标以低优先级发送。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
https://css-tricks.com/send-an-http-request-on-page-exit/
网友评论