API 介绍：

navigator.sendBeacon() 方法支持我们使用 POST 的请求方式将少量的数据异步发送到服务器进行存储。同时避免使用一些传统技术，例如：使用 gif 格式的 img 来发送数据。

为什么要使用：

使用该 API 的应用可以满足在 unload 之前上服务器发送数据，保证数据被提前发送导致后续的部分数据丢失的情况发生。当在 unload 之前适用 img 来发送数据还会造成 unload 的延迟执行，因为要等待图像的加载，其他的传统做法也会引起延迟导致下一个页面出现的不及时。

使用该 API 可以保证：

数据发送可靠；
数据异步传输；
不影响下一个页面载入。

API 使用方法：

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

参数说明：

参数	说明
url	数据发送的服务器地址
data	待发送数据，支持 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型
result <返回值>	当数据被成功加入传输队列后返回 true，否则返回 false

案例分析：

在会话结束时发送统计数据到服务器，我们可以监听 visibilitychange 事件，在 dom 的可见状态变为 hidden 时执行 sendBeacon 发送数据。

组装符合sendBeacon函数的数据参数；
监听visibilitychange；
执行发送数据；
成功插入队列将返回 true。

<!DOCTYPE html>
<html lang="en">
  <body>
    <h3>Send-Data</h3>
    <script>
      // ① 
      const params = new URLSearchParams();
      params.append("fun", "click");
      params.append("time", "100ms");
      params.append("count", "1");
      // ② 
      document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === "hidden") {
          // ③ 
          const result = navigator.sendBeacon("/log", params);
          // ④ 
          console.log(result);
        }
      });
    </script>
  </body>
</html>

使用 expressjs 来准备一个接口数据的服务：

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const port = 3000;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("public"));

// 接收 log 数据
app.post("/log", (req, res) => {
  console.log("body", req.body);
  res.send("pong");
});

app.listen(port, () => {
  console.log(`app listening on port ${port}`);
});

API 兼容性：

注意事项：

避免使用 unload 和 beforeunload 在会话结束时发送统计数据。因为在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload、pagehide 事件。

正确发送统计数据到服务器