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


Beacon API的更多相关文章

  1. 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包

    使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...

  2. Beacon API All In One

    Beacon API All In One Beacon API https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API https:/ ...

  3. html5统计数据上报API:SendBeacon

    公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数 ...

  4. Web Performance API

    Web Performance API 性能监测/性能优化 https://developer.mozilla.org/en-US/docs/Web/API/Performance https://d ...

  5. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解

    系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...

  6. pagehide event & sendBeacon

    pagehide event & sendBeacon 通过 API 测试 pagehide 是否触发了 pagehide 不支持正常的 fetch 请求发送 pagehide 仅支持 sen ...

  7. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  8. 前端监控平台 & 架构

    前端监控平台 & 架构 1px 透明的 gif 字节小, 43 bytes 支持跨域, 兼容场景多,零配置 https://en.wikipedia.org/wiki/GIF demo htt ...

  9. SDK & 埋点 & user behavior tracker

    SDK & 埋点 & user behavior tracker 同一个 SDK ,根据不同的应用市场, 分别进行统计分析 ? https://www.umeng.com/ user ...

随机推荐

  1. Vue3 源码之 reactivity

    注: 为了直观的看到 Vue3 的实现逻辑, 本文移除了边缘情况处理.兼容处理.DEV环境的特殊逻辑等, 只保留了核心逻辑 vue-next/reactivity 实现了 Vue3 的响应性, rea ...

  2. 对于两个输入文件,即文件A 和文件B ,请编写MapReduce程序,对两个文件进行合并排除其中重复的内容,得到一个新的输出文件C。

    package org.apache.hadoop.examples; import java.util.HashMap; import java.io.IOException; import jav ...

  3. 分别简述computed和watch的使用场景

    computed: 当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子: 购物车商品结算的时候watch: 当一条数据影响多条数据的时候就需要用watch 栗子:搜索数据

  4. Kafka Fetch Session剖析

    1.概述 最近有同学留言在使用Kafka的过程中遇到一些问题,比如在拉取的Topic中的数据时会抛出一些异常,今天笔者就为大家来分享一下Kafka的Fetch流程. 2.内容 2.1 背景 首先,我们 ...

  5. 四:SpringBoot-定时任务和异步任务的使用方式

    SpringBoot-定时任务和异步任务的使用方式 1.定时任务 2.同步和异步 3.定时器的使用 3.1 定时器执行规则注解 3.2 定义时间打印定时器 3.3 启动类开启定时器注解 4.异步任务 ...

  6. boss导出简历css

    $('body').css('background-color', '#fff')$('.keywords').hide()$('#wrap').html($('.resume-box').css(' ...

  7. JDK-7新特性,更优雅的关闭流-java try-with-resource语句使用

    前言 公司最近代码质量整改,需要对大方法进行调整,降低到50行以下,对方法的深度进行降低,然后有些文件涉及到流操作,很多try/catch/finally语句,导致行数超出规范值,使用这个语法可以很好 ...

  8. 【实战】通过Python实现疫情地图可视化

    目录 一. json模块 二.通过Python实现疫情地图可视化 2.将json格式的数据保存到Excel 3.应用pyecharts进行数据可视化 一. json模块 JSON(JavaScript ...

  9. 2019牛客多校第三场D-Big Integer

    题意 定义\(A(n)\) 为 n个1表示的十进制数,例如\(A(3) = 111\) 然后对于\(1 \le i \le n,1\le j \le m\) 问有多少的 \(pairs(i,j)\)满 ...

  10. 关于贪心算法的经典问题(算法效率 or 动态规划)

    如题,贪心算法隶属于提高算法效率的方法,也常与动态规划的思路相挂钩或一同出现.下面介绍几个经典贪心问题.(参考自刘汝佳著<算法竞赛入门经典>).P.S.下文皆是我一个字一个字敲出来的,绝对 ...