不同浏览器中beforeunload事件处理异步函数的行为不一致问题求助

问题本质 #

不同浏览器对beforeunload事件中异步任务的处理逻辑存在差异，核心原因是浏览器为了快速释放资源、提升用户体验，会限制页面卸载时异步任务的执行时机：

• Chrome：刷新/跳转页面时，会短暂等待异步任务完成；但关闭标签页时，会优先终止页面进程，不会等待未完成的异步请求。
• Firefox：触发beforeunload的时机与Chrome不同，仅在关闭标签页时会尝试处理异步任务，刷新/跳转场景下不会等待。

另外你当前的async/await写法无效：beforeunload是同步事件，浏览器不会监听异步函数返回的Promise，即使使用await，页面也会直接卸载，不会等待异步操作完成。

可行解决方案 #

1. 给fetch请求添加keepalive选项 #

这是目前最可靠的方案，keepalive允许请求脱离页面生命周期，在页面卸载后继续发送到服务器。修改你的exitChat函数：

function exitChat() {
  return fetch('/api/exit-chat', {
    method: 'POST',
    keepalive: true, // 关键配置
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ /* 请求体数据 */ })
  });
}

注意：keepalive有两个限制：请求体大小不能超过64KB；仅支持GET/POST请求。

2. 修改beforeunload事件监听逻辑 #

不需要使用async/await，直接调用exitChat即可，因为keepalive会让请求在后台完成：

window.addEventListener('beforeunload', function(evt) {
  exitChat();
});

关于“强制延迟页面卸载” #

不推荐这种做法：浏览器对页面卸载的延迟有严格限制（比如Chrome最多允许几秒），且跨浏览器支持不一致，强行阻塞会导致极差的用户体验。另外，同步XMLHttpRequest（曾经用来实现延迟）已被标记为废弃，现代浏览器在很多场景下禁止使用。

额外说明 #

即使使用keepalive，也无法保证100%的请求成功率（极端情况下浏览器可能直接终止所有进程），但这是当前能做到的最接近需求的方案。

内容的提问来源于stack exchange，提问作者Cole36