如何在页面卸载时进行数据上报

2024-05-19 00:08:35

需求场景

在用户离开页面前发送请求，进行数据上报（如统计用户停留时长）
编辑界面未保存退出的情况，保存数据以便恢复

不推荐的方案

1. 在 `unload` / `beforeunload` 中发送同步请求

※ How
axios 和 fetch 都不支持同步请求，因此需要使用原生 AJAX。

sync_test() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){ //...}xhr.open("GET", "http://xxx/xxx", false);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(null)
}window.onbeforeunload = function(e) {sync_test() //发送同步请求
}

※ Result
报错：Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://xxxx/': Synchronous XHR in page dismissal.
※ Why
chrome 不支持在页面卸载事件中（unload、beforeunload）发送同步请求。

参考链接：
Ajax Synchronous Request Failing in Chrome
https://www.jackpu.com/jie-jue-synchronous-xhr-in-page-dismissal-de-wen-ti/

※ More
在 unload / brforeunload 中发送同步请求，73、74版的 chrome 是被支持的（也有其他浏览器是支持的）。但即便如此，也不推荐使用同步的 XMLHttpRequest ，因为这样会导致页面卸载被延迟，并影响下一导航的载入，这并对用户不友好。

2. 在 `unload` / `beforeunload` 创建图片

通过在unload / brforeunload 中创建一个图片元素并设置它的 src 属性，来延迟卸载以保证数据的发送。
这种方式也不被推荐：不仅编码模式不好，也同样会导致非常差的页面载入性能。

推荐的方案

使用 navigator.sendBeacon 。
使用该方法发送请求，可以保证数据有效送达，且不会阻塞页面的卸载或加载。

※ How

window.onbeforeunload = function(e) {navigator.sendBeacon(url, data)
}

※ More
sendBeacon 的处理结果？
sendBeacon 如果成功进入浏览器的发送队列后，会返回true；如果受到队列总数、数据大小的限制后，会返回false。但返回ture，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功了，不会再有任何返回值。

Beacon API用于将少量数据发送到服务器，而无需等待响应。Beacon 专门用于发送数据然后忘记它。我们本并不期待一个响应，而且我们也不会得到响应。—— 使用 Web Beacon API 记录活动

参考链接：
https://www.jianshu.com/p/04e88271a8f2（推荐看看，写得很清晰）
http://qnimate.com/sending-data-to-server-on-page-unload/
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
https://www.cnblogs.com/yelongsan/p/9088305.html

如何在页面卸载时进行数据上报相关推荐

微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
【Web技术】1486- 在页面关闭时提交监控数据的4个解决方案
概览本文以 "前端监控上报数据" 的业务场景,重点解析在页面实例关闭时,如何将监控数据上传到服务端的解决方案. 其中,涉及到4种方案,分别为: 同步XMLHttpReques ...
【Web技术】1424- 4 种在页面关闭时上传监控数据的解决方案
来自:掘金,作者:我是leon 链接:https://juejin.cn/post/7106365076197605413 概览本文以 "前端监控上报数据" 的业务场景,重点解析 ...
通过页面埋点做监控却不影响性能？解密ARMS前端监控数据上报技术内幕
摘要: 本文将为您介绍,在采集多类日志数据的情况下,阿里云业务实时监控服务(ARMS)之前端监控如何优化日志上报前端监控 (又叫UEM,User Experience Management, 用户体 ...
Vue单页面中进行业务数据的上报
为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...
微信小程序：页面跳转时传递数据到另一个页面
一.功能描述页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
vue路由加载页面时，数据返回慢的问题
场景: vue路由加载页面时,数据返回慢的时候页面会有闪动的效果,数据加载前和加载后的区别.(特别是el-table表格数据) 思路: 路由前加载数据,等数据加载完再路由渲染页面解决方案: 使用vu ...
小程序丨从子页面退回父页面时的数据传递
在微信小程序中,从父级页面转到下一个页面,一般可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数,可以参考之前写的http:// ...
web前端埋点及数据上报
web前端埋点及数据上报简介前端埋点即在产品客户端获取用户行为和使用情况的一种监控方式.通过埋点可以获取到用户行为数据,借助这些数据,我们可以从用户角度出发,升级迭代产品,使其更加贴近用户使用习惯 ...

最新文章

热门文章