Beacon API
Beacon API是W3C仍在草案阶段的一项新API,这个API主要用于发送不需要服务器回应的HTTP请求或强制浏览器发送一个请求。
window.addEventListener('unload', logData, false);function logData() {var client = new XMLHttpRequest();client you can find out more.open("POST", "/log", true);client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");client.send(analyticsData);
}
这段代码是在做什么呢?如果做过页面统计、埋点,应该能看出来,这段代码实际上是在用户切换页面时试图向服务器发送一些统计数据。
理想情况下没什么问题,然而由于这个请求是在unload事件的handler当中,浏览器可能会忽略这个请求。因此出现了下面这样的代码:
window.addEventListener('unload', logData, false);function logData() {var client = new XMLHttpRequest();client.open("POST", "/log", false); // 注意这里client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");client.send(analyticsData);
}
XMLHttpRequest.open的第三个参数表示这个HTTP请求是否异步发送。这段代码将强制浏览器进行一个同步的HTTP请求来确保浏览器不会无视这个请求。
现在数据肯定能发出去了,然而网速无情,一个同步的请求意味着浏览器必须等待整个请求发送完成直至收到整条HTTP回应。这对于页面切换来说是致命的延迟。
Beacon API
说到这大家应该明白了,Beacon API 的作用就是为了能让浏览器在类似unload这样的情况下成功发送请求,同时不影响下一个页面的载入。如何使用呢,W3C的例子如下:
window.addEventListener('unload', logData, false);function logData() {navigator.sendBeacon("/log", analyticsData);
}
好吧,太简单了,没啥可说的了。哦不,简单确实,但是太简单了,它隐藏了点细节:
sendBeacon
只能用POST
请求来发送信息;sendBeacon
的第二个参数是可选的,如果提供的话,参数类型可以是ArrayBufferView、Blob、DOMString或者FormData;sendBeacon
所收到的HTTP回应会被无视。实际上即使不无视你也不见得能拿到回应,因为整个请求发送或者收到回应的时候,页面可能早就不存在了;sendBeacon
是有返回值的,类型为bool
:true
表示浏览器已经将这个请求纳入队列稍后处理,false
表示浏览器无法完成这个请求,其原因不详,不过通常来说就是浏览器的HTTP请求队列已满;
Beacon API相关推荐
- Beacon API的应用
遇到了一个需求就是,在浏览器被关闭之前要调用一个后端提供的请求,我一开始用axios,信誓旦旦的说,木有问题,后端后来告诉我,没有接收到有请求,这个时候我就去排除下原因,我debugger看了下,明明 ...
- api存在csrf攻击吗_使用rest api防止单页应用上的csrf攻击
api存在csrf攻击吗 tl;dr - If your SPA uses a private REST API, use CORS and a CSRF Token header. If your ...
- 如何使用 Performance API
本教程介绍了如何使用 Performance API 记录来自访问您的应用程序的真实用户的类似 DevTool 的统计信息. 使用浏览器 DevTools 评估 Web 应用程序性能很有用,但复制实际 ...
- 腾讯企鹅辅导 H5 性能极致优化
企鹅辅导 H5 页面在长期迭代过程中,逐渐累积了一些性能问题,导致页面加载.渲染速度变慢.为了提升用户体验,近期针对页面加载速度,渲染速度做了专项优化,本文是对此次优化的实践总结.分析过程比较细致,希 ...
- 腾讯企鹅辅导 H5 性能极致优化总结
企鹅辅导 H5 页面在长期迭代过程中,逐渐累积了一些性能问题,导致页面加载.渲染速度变慢.为了提升用户体验,近期针对页面加载速度,渲染速度做了专项优化,本文是对此次优化的实践总结.分析过程比较细致,希 ...
- web前端埋点及数据上报
web前端埋点及数据上报 简介 前端埋点即在产品客户端获取用户行为和使用情况的一种监控方式.通过埋点可以获取到用户行为数据,借助这些数据,我们可以从用户角度出发,升级迭代产品,使其更加贴近用户使用习惯 ...
- 如何用网页脚本追踪用户
>>如何用网页脚本追踪用户 >>Beacon API 使用
- Ethereum 基础(一)
以太坊(Ethereum)是社区运行的技术,为加密货币以太币(ETH)和数千个去中心化应用程序提供动力. ethereum.org是您进入以太坊世界的门户.这项技术是新的.不断发展的--有个向导会有帮 ...
- 万向区块链行业研究:如果从用户画像实现角度看数据隐私问题,是怎样的?
前言: 万向区块链董事长兼总经理肖风博士曾说过,不管是元宇宙.区块链还是Web3.0,本质其实都是讲同一件事,就是人类社会在数字时代里的去中心化趋势.因此,无论在元宇宙里,还是Web3.0时代,个人数 ...
最新文章
- Nginx面试!java语言程序设计第四版,你还看不懂吗?
- Py之GUI:Python下各种GUI(图形用户界面)简介、使用优缺点对比
- Postman 最被低估的功能
- Java之品优购课程讲义_day19(6)
- 教你玩转CSS Float(浮动)
- python 深度 视差 计算_python-窗口代价计算视差
- iReport与JasperReport简介
- python数据可视化字段_python数据爬取及数据可视化分析
- centos7安装图形界面
- HDU1829 A Bug's Life 并查集
- 小甲鱼python笔记_小甲鱼Python笔记(类)
- 《华为战略管理法:DSTE实战体系》整体介绍
- 破解密码——利用粘滞键漏洞破解Windows 7 PIN
- 界面设计配色方案说明图一(含RGB配色表)
- 计算机网络网线制作与测试结果,《计算机网络》网线制作实验报告(1).doc
- 码率、帧率和I B P帧
- 让POW的共识机制不再成为公链系统吞吐率的瓶颈 | Conflux CTO伍鸣
- Ubuntu系统下有效的安装gcc/icc
- paper 94:视觉领域博客资源1之中国部分
- UHS-II文档学习
热门文章
- 来自官方文档的Ubuntu 16.04 + tensorflow-GPU 配置
- 7-46 银行排队问题之单队列多窗口服务 (10 分)
- 交叉编译 for arm-linux-gcc... no,QT4.8.6、tslib库移植到arm上配置出错!求大神指点
- 更改oracle背景,Oracle 11gR2修改用户后导致系统HANG住
- php 价格计算方法,PHP算法逻辑:如何计算购买量?
- @kafkalistener中id的作用_无意中测试了下MySQL里面的join操作,发现还是存在理解偏差...
- crawlspider
- Linux安装JDK完整步骤
- POJ3259-负权回路判定
- 7,7显示选中的目标信息