Navigator.sendBeacon()---统计数据发送到

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/