Web API 之 — Beacon

Beacon 的作用是用来向服务器发送一个异步非阻塞的请求。这个请求不会因为页面 unload 的发生而中止，并且不会阻塞页面 unload。所以 Beacon 被使用于在离开页面前，向服务端发送页面统计分析数据。

我们总结一下，在 Beacon 之前，要想在页面离开前，向服务端发送数据的传统方法。

1. 同步 xhr

   由于浏览器在处理 unload 事件时，会忽略掉异步 xhr，那么为了保证请求发送成功，就需要使用同步的 xhr。如下所示：

   window.addEventListener("unload", function logData() {
     var xhr = new XMLHttpRequest();
     xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
     xhr.send(analyticsData); 
   });
   

2. img 标签

   在 unload 的处理函数中，往 document 中添加 img 标签，指定 src，那么通常页面会去加载图片，延迟 unload 的发生。如下所示：

   window.addEventListener("unload", function logData() {
     let imgNode = document.createElement('img');
   	imgNode.src = '/log?' + analyticsData;
   	document.body.append(imgNode);
   });
   

3. 空循环延迟 unload

   在 unload 处理函数中添加一个空循环，延迟若干秒，来保证请求发出。如下所示：

   window.addEventListener("unload", function logData() {
     var xhr = new XMLHttpRequest();
     xhr.open("POST", "/log", true); // asynchronous
     xhr.send(analyticsData);
   	let t0 = Date.now();
   	while(Date.now() - t0 < 2000) {} // 2s
   });
   

以上3种方法毫无疑问会阻塞 unload，导致下个页面的出现时间变长。第二种方法依靠 img 标签，所以只能发送 GET 请求，所携带数据的大小和格式都会有所限制；第3种方法使用空循环并非绝对可靠，理论上不能保证请求一定发送成功。那么 Beacon 就是来解决此类场景下，发送可靠非阻塞的 http 请求。使用 Beacon 的代码如下：

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

navigator.sendBeacon()方法接收两个参数。

• 第一个参数是 url，可以是绝对路径也可以是相对路径。
• 第二个参数是数据，数据格式可以是 ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData, URLSearchParams。

另外此方法发送的是一个 POST 请求，并且没有回调，因为 Beacon 的使用场景并不需要关系 response。

总结

Beacon 需要了解的内容很简单。用于离开页面前向服务端发送统计分析数据。navigator.sendBeacon()接收 url 和 data，data 的数据类型可以是 ArrayBufferView, Blob, DOMString, FormData, URLSearchParams。

参考

1. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon#Browser_compatibility
2. https://w3c.github.io/beacon/#sendbeacon-method