Web API 之 — Beacon

90 阅读 0 评论 60 点赞

我是靠谱客的博主顺利铃铛，最近开发中收集的这篇文章主要介绍Web API 之 — Beacon，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

同步 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); 
});

img 标签

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

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

空循环延迟 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。