原文地址:https://mp.weixin.qq.com/s/-moAfEZicrFmun4qfWLdOQ 简单示例js: var data = JSON.stringify({ name: 'Berwin' }); navigator.sendBeacon('http://localhost:80/index.php', data) 简单php示例: 由于是信标发送的 POST 请求,并且是 "text/plain" 数据类型,所以适合用 $GLOBALS['HTTP_RAW_PO…

http://kaifage.com/notes/76/navigator-sendBeacon.html 如某些统计系统,在页面unload时,如果要上报当前数据,采用xhr的同步上报方式,会阻塞当前页面的跳转:使用new Image有可能遇到aborted,导致无法成功发送.现在好了,可以使用浏览器来提供发送保障的更简洁的sendBeacon方法.sendBeacon是异步的,不会影响当前页到下一个页面的跳转速度,且不受同域限制. window.addEventListener('unloa…

之所以介绍这个还在草案中的方法,是源于最近新做的一个活动.该活动有个需求,就是用户离开该页面的某个时间段之后,发个请求给该用户送券.后来是通过setTimeout来做的,用户离开该页面,该页面进入后台.这时在页面中设置的定时器依然是有效的,但是不同手机对这个有效时间的兼容性不一样,有长有短.safari浏览器则是暂停的. navigator.sendBeacon() 方法可以用来从用户代理向服务器异步地发送小的HTTP数据.这个方法目前还在实验阶段,暂时还无法使用在项目当中.就算不用考虑兼容性,…

window.navigator 对象 包含浏览器和系统信息的 Navigator 对象. 通过这个属性 了解用户的环境信息 window.navigator.userAgent 返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息 用户可以改变这个字符串. 这个字符串的格式并无统一规定,也无法保证未来的适用性,各种上网设备层出不穷,难以穷尽. 所以,现在一般不再通过它识别浏览器了, 使用“功能识别”方法,即逐一测试当前浏览器是否支持要用到的 JavaScript 功能 通过 …

页面性能日志: DNS解析耗时 TCP链接耗时 SSL安全链接耗时 网络请求耗时 DOM解析耗时 资源加载耗时 首包时间 白屏时间 首次可交换时间 Dom Ready时间 页面完全加载时间. 如某些统计系统,在页面unload时,如果要上报当前数据,采用xhr的同步上报方式,会阻塞当前页面的跳转:使用new Image有可能遇到aborted,导致无法成功发送. 现在好了,可以使用浏览器来提供发送保障的更简洁的sendBeacon方法.sendBeacon是异步的,不会影响当前页到下一个页面的跳…

公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数据上报不会有差错. 常见方案缺陷 数据发回服务器的常见做法是,将收集好的用户数据,放在unload事件里面,用 AJAX 请求发回服务器.但是这种方法有个弊端,因为AJAX通常应用的场景是异步发送请求,在 unload 事件中,使用 XHR 异步发送数据.这种做法有可能导致服务端未收到数据,浏览器就…

我们经常会在网站追踪用户的信息,比如记录用户的停留时间. window.addEventListener("unload", () => { // sendHTTP }); 但是如果发送是XHR请求的话.页面会阻塞.google了发现有一个api是可以支持的 大致是说 navigator.sendBeacon 可以用来发送一些小量的数据,特别适合统计场景,且这个请求是异步的,不受浏览器行为限制:即使浏览器关闭请求也能照样发出. var data = new FormData();…

pagehide event & sendBeacon 通过 API 测试 pagehide 是否触发了 pagehide 不支持正常的 fetch 请求发送 pagehide 仅支持 sendBeacon 请求发送 pagehide 请求发送时机 Page Visibility API https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API Beacon API https://developer.mozilla…

window.navigator All In One navigator "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @created 2020-11-11 * @modified * * @description * @difficulty Easy Medium Hard * @complexity O(n) * @augments * @example * @link *…

Navigator.registerProtocolHandler All In One Web API custom protocol URL Schemes URL Protocols https://caniuse.com/?search=registerProtocolHandler 不推荐使用,支持不足 https://html.spec.whatwg.org/multipage/webappapis.html#custom-handlers registerProtocolHandl…