在用户刷新、跳转或关闭浏览器时向服务器发送统计数据，前端开发中常用的方法有以下几种：
1. 使用navigator.sendBeacon() API:
这是最推荐的方式，尤其是在用户即将离开页面时。sendBeacon() 方法异步发送少量数据到服务器，并且不会阻塞页面卸载或影响下一个导航的加载性能。它在浏览器后台发送数据，即使浏览器已经关闭，也能保证数据尽可能地发送到服务器。
window.addEventListener('unload', logData);
function logData() {
if (navigator.sendBeacon) {
navigator.sendBeacon('/log', JSON.stringify({/* 数据 */}));
} else {
// sendBeacon() 不支持时的 fallback，例如使用同步 XMLHttpRequest
// 但要注意这可能会阻塞页面卸载
var xhr = new XMLHttpRequest();
xhr.open('POST', '/log', false); // 使用同步请求
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({/* 数据 */}));
}
}
2. 使用XMLHttpRequest (同步):
在unload或beforeunload事件中使用同步的XMLHttpRequest发送数据。这种方法的缺点是会阻塞页面卸载，影响用户体验，并且在某些浏览器中可能不被支持或受到限制。 因此，不推荐使用，除非sendBeacon不可用。
window.addEventListener('unload', logData); // 或 beforeunload
function logData() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/log', false); // 同步请求
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({/* 数据 */}));
}
3. 使用fetch API (keepalive):
fetch API 的 keepalive 选项允许在页面卸载后继续发送请求。这在支持的浏览器中可以作为 sendBeacon 的替代方案。
window.addEventListener('unload', logData);
async function logData() {
try {
await fetch('/log', {
method: 'POST',
body: JSON.stringify({/* 数据 */}),
keepalive: true
});
} catch (error) {
// 处理错误
}
}
4. 使用 Image 对象 (像素追踪):
创建一个 Image 对象，并将其 src 属性设置为指向服务器上的一个记录日志的脚本，可以在 URL 中携带数据。这种方法的缺点是只能发送 GET 请求，并且数据量有限。
window.addEventListener('unload', logData);
function logData() {
new Image().src = `/log?data=${encodeURIComponent(JSON.stringify({/* 数据 */}))`;
}
事件选择:
unload: 页面完全卸载时触发。此时文档、资源都已经被移除。由于页面正在卸载，执行时间有限，建议使用sendBeacon。beforeunload: 在页面卸载前触发，可以取消卸载。如果在该事件处理函数中返回一个非空字符串，浏览器会显示一个确认对话框，询问用户是否要离开页面。 要注意的是，在移动端浏览器中，beforeunload事件可能不被支持或行为不一致。
数据格式:
建议使用 JSON 格式来发送数据，方便服务器端处理。
服务器端:
服务器端需要设置相应的路由来接收和处理这些数据。
总结:
navigator.sendBeacon() 是目前最好的选择，因为它不会阻塞页面卸载，并且能够保证数据尽可能地发送到服务器。如果浏览器不支持 sendBeacon，可以考虑使用 fetch with keepalive，最后才考虑使用同步的 XMLHttpRequest 或 Image 对象。 选择哪种方法取决于你的具体需求和浏览器兼容性要求。 记住测试不同浏览器和场景下的兼容性。