Navigator.sendBeacon()
navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。语法
navigator.sendBeacon(url, data);
参数 url url 参数表明 data 将要被发送到的网络地址。
data data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据。
返回值 当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false。
描述
这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 unload (en-US) 事件处理器中产生的异步 XMLHttpRequest。
为了解决这个问题, 统计和诊断代码通常要在 unload 或者 beforeunload (en-US) 事件处理器中发起一个同步 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() 方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。此外,代码实际上还要比其他技术简单许多!
【Navigator.sendBeacon()】下面的例子展示了一个理论上的统计代码模式——通过使用 sendBeacon() 方法向服务器发送数据。
window.addEventListener('unload', logData, false);
function logData() {
navigator.sendBeacon("/log", analyticsData);
}
推荐阅读
- 打开Anaconda|打开Anaconda Navigator 时报错 error 5 拒绝访问
- window.navigator.userAgent用来区分设备和浏览器
- js判断PC端或是移动端
- js判断PC端还是移动端
- 区分移动端H5断网后操作
- React|React Navigation 入门(二) - StackNavigator 的使用与传递参数
- react|react navigation - stackNavigator详细配置(中文版)
- navigator+hover-class+小程序路由
- RN笔记-TabNavigator隐藏Tabbar
- js判断是pc浏览器还是移动端浏览器|js判断是pc浏览器还是移动端浏览器 navigator.userAgent.toLowerCase()