tgoop.com/cosine_front_end/2838
Create:
Last Update:
Last Update:
#优质博文 #前端 #JavaScript #WebAPI #浏览器 #性能
Say bye with JavaScript Beacon
AI 摘要：作者指出在 beforeunload/unload 里用 XMLHttpRequest 或 fetch 上报并不可靠，因为浏览器不会为脚本阻塞卸载流程，网络请求易被取消；推荐使用信标接口 (Beacon API) 的 navigator.sendBeacon 进行 fire-and-forget 异步上报：无需回调或 Promise，JS 立即结束，由浏览器后台传输；虽仅支持 POST 且负载很小，但非常适合离开页面、实时埋点与轻量级前后端同步等无需等待响应的场景，文末附 MDN 文档。
1. 问题背景与常见误区
• 用户离开网站不只关闭标签页，也可能修改地址栏或点书签，难以精准用单一事件捕获。
• 常见做法是在 beforeunload/unload 里用 XMLHttpRequest/fetch 上报，但实践中经常不稳定。
2. 为什么 beforeunload 不可靠
• 浏览器不会为执行 JavaScript 而阻塞卸载流程，以免影响用户体验。
• 页面卸载时网络请求可能未发出或被浏览器取消，导致上报丢失。
3. Beacon API 介绍与用法
• 核心调用：navigator.sendBeacon(url, data)；发送后立即返回，无回调或 Promise。
• 特性：fire-and-forget，浏览器接管传输，JS 执行立即结束，内存不被占用。
• 设计目标：在卸载等敏感时机可靠传递小数据。
4. 适用场景
• 页面关闭/跳转时的 analytics 上报、自动登出提示或状态同步。
• 任意时刻的轻量数据同步（如输入草稿、埋点）——无需等待响应即可继续交互。
5. 限制与注意事项
• 仅支持 POST，负载较小，适合“微消息”而非大体量数据。
• 不适用于需要确认响应、复杂重试或事务保证的场景；这类应选用 fetch/XHR 并在交互上做等待或队列重试。
6. 参考链接
• Beacon API - MDN
author Hemath
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2838