当需要在页面关闭或用户离开时发送数据请求，传统方法如 XMLHttpRequest 或 fetch 并不总是可靠，可能会因为浏览器的限制而中断。Navigator.sendBeacon() 提供了一种可靠且异步的方式，允许我们在不阻塞页面卸载的情况下发送少量数据到服务器。
什么是 Navigator.sendBeacon()？
Navigator.sendBeacon() 是一种用于在文档卸载期间发送小型数据包到服务器的 API。它的主要作用是确保浏览器在页面卸载（例如用户关闭页面或导航到其他页面）时，仍然能够成功发送 HTTP 请求，而不阻塞页面的卸载过程。
基本用法
// 构建要发送的数据
const data = JSON.stringify({ event: 'page_unload', timestamp: Date.now() });
// 使用 sendBeacon 发送数据
navigator.sendBeacon('/log', data);
适用场景
- 用户行为跟踪：当用户离开页面时，记录用户行为或日志数据，比如用户在页面上停留的时间、点击了哪些按钮等。
- 表单自动保存：在用户关闭页面或刷新时，将未保存的表单数据发送到服务器，避免数据丢失。
- 性能监控：在页面关闭时发送性能数据，如页面加载时间、资源使用情况等。
为什么使用 sendBeacon() 而非 fetch() 或 XMLHttpRequest？
sendBeacon() 的优势在于它是异步且非阻塞的，它保证了请求会尽可能地发送，即便页面已经开始卸载。此外，传统方法如 fetch() 或 XMLHttpRequest 可能在页面卸载时被浏览器强制中断，导致数据无法发送，而 sendBeacon() 则能够更可靠地完成这个任务。
特点
- 异步：
sendBeacon()是异步的，不会阻塞页面的卸载过程。 - 不支持响应处理：与
fetch()或XMLHttpRequest不同，sendBeacon()不会处理服务器的响应，它专注于发送数据。 - 数据量有限：适合发送小量数据，通常用于日志、分析、状态同步等。
注意事项
- 发送的数据量应该较小，一般来说，
sendBeacon()适用于发送简单的 JSON 数据或日志。 - 该 API 不适合需要立即获得响应的场景，因为它不会处理服务器的响应。
浏览器支持
sendBeacon() 得到了大多数现代浏览器的支持，包括 Chrome、Firefox、Safari 等。它主要用于可靠的后台数据传输，特别是用户离开页面时。
Navigator.sendBeacon() 提供了一种简单而高效的方式，在不打扰用户的情况下，确保关键信息在页面卸载时能够可靠发送。这对于用户行为分析、日志收集、性能监控等场景尤其有用。
