Navigator.sendBeacon() 解析

概念

Navigator.sendBeacon() 用于通过 http post 方法将少量数据通过异步传输的方式发送到服务器。该方法有两个参数，第一个必填参数 url，用于指定传送数据的目标地址，第二个可选参数 data，可以传输 ArrayBuffer，ArrayBufferView，FormData，DomString，Blob，URLSearchParams 格式的数据。成功将数据发送到传输队列后就会得到提示，成功返回 true，失败返回 false。该方法用于统计和诊断代码的需要，不会影响页面的正常卸载和下一个导航的加载性能

实例

为了验证 sendBeacon() 的使用方法，可以在 HTML 文件中编写 sendBeacon() 方法的使用代码，使用 express 搭建一个 web 服务器。浏览器执行 HTML 文件的代码就会通过 sendBeacon() 将数据发送到服务器。

// base.html
<script>
  let url = "http://localhost:3000/log";
  let log = function () {
    // 测试是否支持 Beacon
    if (!navigator.sendBeacon) return true;
    const data = {
      start: new Date().getTime(),
      end: performance.now(),
      url: "base.html",
    };
    const res = navigator.sendBeacon(url, JSON.stringify(data));
    console.log("