Navigator.sendBeacon()

2019-08-16102次阅读javascript

navigator.sendBeacon()方法可用于通过HTTP将少量数据异步传输到Web服务器。该方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据。

 

语法

navigator.sendBeacon(url, data);

 

参数

  • url:参数表明data将要被发送到的网络地址。
  • data:参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者FormData类型的数据。

 

返回值

当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false。

过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 unload事件处理器中产生的异步XMLHttpRequest

为了解决这个问题, 统计和诊断代码通常要在unload或者beforeunload事件处理器中发起一个同步XMLHttpRequest来发送数据。同步的XMLHttpRequest迫使用户代理延迟卸载文档,并使得下一个导航出现的更晚。

有一些技术被用来保证数据的发送。其中一种是通过在卸载事件处理器中创建一个图片元素并设置它的src属性的方法来延迟卸载以保证数据的发送。因为绝大多数用户代理会延迟卸载以保证图片的载入,所以数据可以在卸载事件中发送。另一种技术是通过创建一个几秒钟的no-op循环来延迟卸载并向服务器发送数据。

这些技术不仅编码模式不好,其中的一些甚至并不可靠而且会导致非常差的页面载入性能。

下面的例子展示了一个理论上的统计代码——在卸载事件处理器中尝试通过一个同步的XMLHttpRequest向服务器发送数据。这导致了页面卸载被延迟。

window.addEventListener('unload', logData, false);

function logData() {
    var client = new XMLHttpRequest();
    client.open("POST", "/log", false); // 第三个参数表明是同步的 xhr
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(analyticsData);
}

这就是sendBeacon()方法存在的意义。使用sendBeacon()方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。此外,代码实际上还要比其他技术简单许多!

window.addEventListener('unload', logData, false);

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

不过还有更简单的,请参阅JavaScript追踪统计用户数据

上一篇: input文本框disabled、readonly、unselectable不可编辑的3种方法  下一篇: nodejs中的异常错误处理  

Navigator.sendBeacon()相关文章