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

https://cdn.xgqfrms.xyz/

应用场景

埋点

异常处理

Sentry

数据收集

数据上报

性能监控

AMP

IE 不支持

1px 透明 gif 图片

  1. 字节小, 43 bytes

  2. 支持跨域, 兼容场景多,零配置

前端监控平台 & 架构

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

https://www.w3.org/TR/beacon/

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 发布文章使用:只允许注册用户才可以访问!


最新文章

  1. 正则表达式校验URL
  2. [原创]如何在Parcelable中使用泛型
  3. 代理 XP”组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用 sp_configure 来启用“代理 XP”。
  4. HDU 5446 中国剩余定理+lucas
  5. JAVA中的输入方法
  6. Code笔记 之:防盗链(图片)
  7. C语言实现冒泡排序-整数排序
  8. sql注入在线检測(sqlmapapi)
  9. ios开发——实战Swift篇&简单项目的实现
  10. 使用Pushlet来实现服务器端向客户端推送信息
  11. 使用Python实现子区域数据分类统计
  12. 刨根究底字符编码之七——ANSI编码与代码页(Code Page)
  13. asp.net 动态压缩、切割图片,并做缓存处理机制
  14. Maven项目强制更新,解决Failed to read artifact descriptor for xxx.jar问题
  15. python_Tkinter
  16. An Introduction To The SQLite C/C++ Interface
  17. OpenLayers学习笔记(二)— QML与HTML通信之画图
  18. Java GC机制中Minor GC/Full GC
  19. python学习(五)
  20. flutter环境配置

热门文章

  1. ADB命令连接逍遥模拟器
  2. 冷饭新炒:理解JDK中UUID的底层实现
  3. Manachar’s Algorithm
  4. LOJ10104Blockade
  5. 五:Spring Security 中的角色继承问题
  6. zabbix设置告警
  7. 分布式理论 PACELC 了解么?
  8. 2019牛客暑期多校训练营(第一场)A - Equivalent Prefixes(单调栈)
  9. 【bzoj 4455】小星星(树型DP+容斥原理+dfs建树和计算的2种方式)
  10. 【noi 2.7_7215】简单的整数划分问题(算法效率)