如何在浏览器关闭/页面离开前发送状态中的最新数值到服务端

首先明确核心限制：普通异步请求（常规fetch、异步XHR）在页面关闭、跳转的卸载流程中，会被浏览器直接终止任务队列，大概率无法成功发送；早年用同步XHR阻塞卸载流程发请求的方案已经被所有现代浏览器废弃，不仅会严重拖慢页面跳转体验，还会被默认拦截，不要使用。

当前最稳定的实现方案如下：

• 优先使用navigator.sendBeacon()做卸载时上报：这个API是浏览器专门为「页面卸载时可靠发送数据、不阻塞页面导航」设计的，它会把待发送的请求交给浏览器底层进程托管，即使页面文档被销毁，请求也会保证被发出，不会因为JS上下文销毁被取消。
  注意不要绑定beforeunload/unload事件触发上报，这两个事件在移动端、浏览器直接切后台杀进程的场景触发率极低，推荐绑定visibilitychange事件，在页面进入hidden状态时触发上报，覆盖关闭页面、跳走、切后台所有场景，示例代码：

  let currentValue = 0; // 你存在内存里的待上报数值
  // 原有setInterval定时上报逻辑保留
  setInterval(() => {
    // 原有定时上报逻辑
  }, 10000);
  
  // 新增离开/隐藏时即时上报逻辑
  window.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      const payload = new Blob(
        [JSON.stringify({ value: currentValue })],
        { type: 'application/json' }
      );
      navigator.sendBeacon('/api/update', payload);
    }
  });
  

• 加一层本地缓存兜底：遇到浏览器崩溃、设备断电这类JS代码完全来不及执行的极端场景，任何前端即时上报方案都无效，可以每次数值更新时同步把最新值存在sessionStorage/localStorage里，用户下次打开页面时先检查本地有没有未确认上报的数值，有就先补发，最大程度降低丢数概率。
• 额外提醒：你现在用的setInterval定时上报本身就有坑，页面切到后台之后，浏览器会对后台标签页的定时器做强制降频，甚至直接暂停定时器执行，不要完全依赖固定间隔的定时器做精准上报。

你可以顺着以下几个方向补相关机制，就能把这类场景的逻辑完全理清楚：

• 页面生命周期（Page Lifecycle）规范：梳理浏览器页面从加载、激活、后台隐藏、到卸载销毁的全流程状态，以及每个状态对应的触发事件、浏览器对JS执行的限制规则。
• 事件循环的任务调度规则：重点关注不同优先级任务的执行时机，以及页面进入隐藏、卸载阶段时，浏览器会丢弃哪些类型的排队任务，哪些API的任务会被保留执行。
• 浏览器后台标签页的资源节流策略：了解定时器、网络请求、动画等API在页面非激活状态下的执行限制，避免依赖前端定时器做精准的时间逻辑。

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