原文地址: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…

<!-- BOM:Brower Object Model 浏览器对象模型 这个模型方便操作浏览器 浏览器对应的对象就是windows对象,这个可以通过查阅DHTML API获得 --> <!--定义按钮onclick事件处理方式--> <script type="text/javascript"> //想要知道这个浏览器的信息.就需要使用window对象中的navigator function windowObjectDemo(){ var name…

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

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

XMLHttpRequest 对象 浏览器与服务器之间,采用 HTTP 协议 通信. 用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏览器就会向服务器发出 HTTP 请求 AJAX 2005.02 提出的概念 ---- Asynchronous JavaScript and XML 通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页 通常概念: JavaScript 脚本发起 HTTP 通信的代名词…

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

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

目录 前端基础之BOM和DOM BOM DOM 前端基础之BOM和DOM BOM是指浏览器对象模型,他使JavaScript有能力与浏览器进行对话 DOM是指文档对象模型,通过它,可以访问HTML文档的所有元素 BOM 简单的说就是可以使用js命令,对浏览器进行一些操作 navigator对象(了解即可) navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客…

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