Beacon API In Action All In One

Beacon API

User Tracking

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/

beforeunload


addEventListener('beforeunload', (event) => { });
onbeforeunload = (event) => { };

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
The document is still visible and the event is still cancelable at this point.

当窗口、文档及其资源即将被卸载时，会触发 beforeunload 事件。
文档仍然可见，此时事件仍可取消。

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

https://www.cnblogs.com/xgqfrms/p/13954019.html

Page Lifecycle API

https://developer.chrome.com/blog/page-lifecycle-api/

应用场景

埋点

异常处理

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();