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 发布文章使用:只允许注册用户才可以访问!
Beacon API的更多相关文章
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- Beacon API All In One
Beacon API All In One Beacon API https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API https:/ ...
- html5统计数据上报API:SendBeacon
公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数 ...
- Web Performance API
Web Performance API 性能监测/性能优化 https://developer.mozilla.org/en-US/docs/Web/API/Performance https://d ...
- Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解
系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...
- pagehide event & sendBeacon
pagehide event & sendBeacon 通过 API 测试 pagehide 是否触发了 pagehide 不支持正常的 fetch 请求发送 pagehide 仅支持 sen ...
- infinite scroll blogs
infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...
- 前端监控平台 & 架构
前端监控平台 & 架构 1px 透明的 gif 字节小, 43 bytes 支持跨域, 兼容场景多,零配置 https://en.wikipedia.org/wiki/GIF demo htt ...
- SDK & 埋点 & user behavior tracker
SDK & 埋点 & user behavior tracker 同一个 SDK ,根据不同的应用市场, 分别进行统计分析 ? https://www.umeng.com/ user ...
随机推荐
- Vue3 源码之 reactivity
注: 为了直观的看到 Vue3 的实现逻辑, 本文移除了边缘情况处理.兼容处理.DEV环境的特殊逻辑等, 只保留了核心逻辑 vue-next/reactivity 实现了 Vue3 的响应性, rea ...
- 对于两个输入文件,即文件A 和文件B ,请编写MapReduce程序,对两个文件进行合并排除其中重复的内容,得到一个新的输出文件C。
package org.apache.hadoop.examples; import java.util.HashMap; import java.io.IOException; import jav ...
- 分别简述computed和watch的使用场景
computed: 当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子: 购物车商品结算的时候watch: 当一条数据影响多条数据的时候就需要用watch 栗子:搜索数据
- Kafka Fetch Session剖析
1.概述 最近有同学留言在使用Kafka的过程中遇到一些问题,比如在拉取的Topic中的数据时会抛出一些异常,今天笔者就为大家来分享一下Kafka的Fetch流程. 2.内容 2.1 背景 首先,我们 ...
- 四:SpringBoot-定时任务和异步任务的使用方式
SpringBoot-定时任务和异步任务的使用方式 1.定时任务 2.同步和异步 3.定时器的使用 3.1 定时器执行规则注解 3.2 定义时间打印定时器 3.3 启动类开启定时器注解 4.异步任务 ...
- boss导出简历css
$('body').css('background-color', '#fff')$('.keywords').hide()$('#wrap').html($('.resume-box').css(' ...
- JDK-7新特性,更优雅的关闭流-java try-with-resource语句使用
前言 公司最近代码质量整改,需要对大方法进行调整,降低到50行以下,对方法的深度进行降低,然后有些文件涉及到流操作,很多try/catch/finally语句,导致行数超出规范值,使用这个语法可以很好 ...
- 【实战】通过Python实现疫情地图可视化
目录 一. json模块 二.通过Python实现疫情地图可视化 2.将json格式的数据保存到Excel 3.应用pyecharts进行数据可视化 一. json模块 JSON(JavaScript ...
- 2019牛客多校第三场D-Big Integer
题意 定义\(A(n)\) 为 n个1表示的十进制数,例如\(A(3) = 111\) 然后对于\(1 \le i \le n,1\le j \le m\) 问有多少的 \(pairs(i,j)\)满 ...
- 关于贪心算法的经典问题(算法效率 or 动态规划)
如题,贪心算法隶属于提高算法效率的方法,也常与动态规划的思路相挂钩或一同出现.下面介绍几个经典贪心问题.(参考自刘汝佳著<算法竞赛入门经典>).P.S.下文皆是我一个字一个字敲出来的,绝对 ...