Beacon API
Beacon API
User Tracking
https://caniuse.com/#feat=beacon
Question & Solution
Beacon API 不会延缓网页卸载,不会严重影响用户体验。
为了解决网页卸载时,异步请求无法成功的问题,浏览器特别实现了一个 Beacon API,允许异步请求脱离当前主线程,放到浏览器进程里面发出,这样可以保证一定能发出。
navigator.sendBeacon()方法可以保证,异步请求一定会发出;
第一个参数是请求的网址,第二个参数是发送的数据;
Beacon API 发出的是 POST 请求。
window.addEventListener('click', function (event) {
navigator.sendBeacon('/graphql/api/v3/logs', 'event=click');
});
https://api.xgqfrms.xyz/graphql/api/v3/logs
应用场景
埋点
异常处理
Sentry
数据收集
数据上报
性能监控
AMP
IE 不支持
1px 透明 gif 图片
字节小, 43 bytes
支持跨域, 兼容场景多,零配置
前端监控平台 & 架构
https://www.cnblogs.com/xgqfrms/p/13090118.html
Web Performance API
window.performance;
performance.timing
performance.navigation
performance.memory
performance.getEntries();
performance.now();
performance.toJSON();
Navigation Timing API
https://www.cnblogs.com/xgqfrms/p/13219596.html
refs
W3C Candidate Recommendation 13 April 2017
https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API
https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
http://www.ruanyifeng.com/blog/2019/04/user-tracking.html
https://www.sitepoint.com/introduction-beacon-api/
https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/
https://golb.hplar.ch/2018/09/beacon-api.html
Transparent.gif
Transparent.gif (1 × 1 pixels, file size: 42 bytes, MIME type: image/gif)
https://commons.wikimedia.org/wiki/File:Transparent.gif
https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif
Bluetooth low energy (BLE) beacons with Eddystone,
具有Eddystone的蓝牙低功耗(BLE)信标
https://developers.google.com/beacons
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
最新文章
- 正则表达式校验URL
- [原创]如何在Parcelable中使用泛型
- 代理 XP”组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用 sp_configure 来启用“代理 XP”。
- HDU 5446 中国剩余定理+lucas
- JAVA中的输入方法
- Code笔记 之:防盗链(图片)
- C语言实现冒泡排序-整数排序
- sql注入在线检測(sqlmapapi)
- ios开发——实战Swift篇&;简单项目的实现
- 使用Pushlet来实现服务器端向客户端推送信息
- 使用Python实现子区域数据分类统计
- 刨根究底字符编码之七——ANSI编码与代码页(Code Page)
- asp.net 动态压缩、切割图片,并做缓存处理机制
- Maven项目强制更新,解决Failed to read artifact descriptor for xxx.jar问题
- python_Tkinter
- An Introduction To The SQLite C/C++ Interface
- OpenLayers学习笔记(二)— QML与HTML通信之画图
- Java GC机制中Minor GC/Full GC
- python学习(五)
- flutter环境配置