转载说明：原创不易，未经授权，谢绝任何形式的转载

欢迎来到《必知的JavaScript API系列》，本系列将与您一起学习JavaScript API，以便您能够像高级工程师一样熟练地使用它。今天我们来学习下 Beacon API。

1、 简介

Beacon API是HTML5提供的新型浏览器API，可以在不影响当前页面加载和性能的情况下，在浏览器后台异步发送数据。借助Beacon API，开发人员可以在页面卸载或关闭时向服务器发送数据，从而实现一些监控和日志记录功能。

2、应用场景

Beacon API的主要作用是异步发送数据，在某些需要快速响应且不影响用户体验的场景下，可以使用Beacon API来报告和发送数据。例如，可以使用Beacon API来实现页面性能监控、异常日志记录、用户行为跟踪等功能。此外，当页面卸载或关闭时，Beacon API还可以用于向服务器发送数据，从而提高数据的完整性和准确性。具体的应用我做了一些归纳，如下所示：

性能监控：开发人员可以使用Beacon API来监控页面的性能指标，例如页面加载时间、资源加载时间等。在页面卸载或关闭时，可以使用Beacon API将这些性能数据发送到服务器进行分析和监测，以便了解页面的加载和性能情况。异常日志记录：当页面发生异常或错误时，开发人员可以使用Beacon API将相关错误信息发送到服务器进行记录和分析。这有助于开发人员了解页面中可能存在的问题，并及时采取措施进行修复。用户行为跟踪：借助Beacon API，开发人员可以追踪用户在页面上的行为，例如点击、滚动、输入等操作。通过将这些行为数据发送到服务器，可以对用户行为进行分析，了解用户的偏好和行为模式，从而优化用户体验和改进产品设计。数据收集：在某些场景下，开发人员需要收集用户数据或特定事件的数据。Beacon API提供了一种简单的方式来将这些数据异步地发送到服务器进行处理和存储，而无需阻塞当前页面的加载和操作。

总之，Beacon API提供了一种方便、高效的方式来在浏览器后台发送数据，适用于各种需要异步传输数据且对页面性能要求较高的场景。通过使用Beacon API，开发人员可以实现更好的性能监控、异常日志记录和用户行为分析等功能，从而提升应用程序的质量和用户体验。

3、如何使用 Beacon API

使用Beacon API相对简单，以下是使用Beacon API的基本步骤：

1、创建要发送的数据：首先，您需要创建要发送的数据。这可以是一个简单的字符串或一个包含更复杂结构的JavaScript对象，具体取决于您的需求和数据格式。

2、发送数据：使用navigator.sendBeacon(url, data)方法发送数据。其中，url是数据发送的目标URL，data是要发送的数据。

var data = "Hello, Beacon API!";var url = ";;navigator.sendBeacon(url, data);

3、处理数据：在服务器端，您需要准备一个接收Beacon API请求的端点。该端点接收到Beacon API发送的数据，并对数据进行处理和存储。

// 服务器端示例（使用Node.js和Express框架）app.post('/endpoint', function(req, res) {  var data = req.body;  // 处理接收到的数据  // ...  res.sendStatus(200); // 返回响应状态码});

4、确认发送：Beacon API的sendBeacon()方法返回一个布尔值，表示数据是否成功被浏览器接受和发送。您可以根据返回值来确认数据是否成功发送。

var data = "Hello, Beacon API!";var url = ";;var result = navigator.sendBeacon(url, data);if (result) {  console.log("Data sent successfully!");} else {  console.log("Data sending failed.");}

需要注意的是，Beacon API的数据发送是异步的，并且在页面卸载或关闭时进行。这意味着数据发送不会阻塞当前页面的加载和操作，适用于需要在后台发送数据而不干扰用户体验的场景。

此外，Beacon API还具有一些附加功能，例如指定请求的Content-Type、设置请求的Credentials、指定请求的优先级等。您可以根据具体需求查阅官方文档来了解更多详细的用法和选项。

请注意，由于Beacon API是HTML5标准中的新功能，支持程度可能因浏览器版本和环境而异。在使用Beacon API之前，建议您检查浏览器的兼容性并提供备用方案以应对不支持的情况。

4、Beacon API的使用场景示例

Beacon API可以在各种场景下使用，以下是一些使用示例：

1、 页面性能监控

使用Beacon API，可以在页面加载后异步地将性能数据发送到服务器进行监控和分析。例如，可以发送页面加载时间、资源加载时间、响应时间等数据。

window.addEventListener("load", function () {  var timing = performance.timing;  var data = {    page_load_time: timing.loadEventEnd - timing.navigationStart,    dns_time: timing.domainLookupEnd - timing.domainLookupStart,    tcp_time: timing.connectEnd - timing.connectStart,    request_time: timing.responseEnd - timing.requestStart,    dom_loading_time:      timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart,    dom_interactive_time: timing.domInteractive - timing.navigationStart,    dom_ready_time: timing.domContentLoadedEventEnd - timing.navigationStart,    redirect_time: timing.redirectEnd - timing.redirectStart,    unload_time: timing.unloadEventEnd - timing.unloadEventStart,    secure_connection_time:      timing.secureConnectionStart > 0        ? timing.connectEnd - timing.secureConnectionStart        : 0,  };  navigator.sendBeacon("/log", JSON.stringify(data));});

2 异常日志记录

使用Beacon API，当页面发生异常时，可以异步地将异常信息发送到服务器进行日志记录和分析。例如，可以发送异常类型、异常堆栈信息、用户信息等。

window.onerror = function (msg, url, lineNo, columnNo, error) {  var data = {    message: msg,    url: url,    line_number: lineNo,    column_number: columnNo,    stack_trace: error ? error.stack : "",  };  navigator.sendBeacon("/log", JSON.stringify(data));  return true;};

3 用户行为跟踪

使用Beacon API，可以在用户执行某些操作时，将行为数据异步地发送到服务器进行行为分析和用户画像建立。例如，可以发送用户的点击、滚动、悬停等行为数据。

document.addEventListener("click", function (event) {  var data = {    type: "click",    target: event.target.tagName,    x: event.clientX,    y: event.clientY,  };  navigator.sendBeacon("/log", JSON.stringify(data));});

4、使用Beacon API在React中进行埋点的示例

以下是使用Beacon API在React中进行埋点的示例：

import React, { useEffect } from "react";function App() {  useEffect(() => {    const handleClick = (event) => {      const data = {        type: "click",        target: event.target.tagName,        x: event.clientX,        y: event.clientY,      };      navigator.sendBeacon("/log", JSON.stringify(data));    };    document.addEventListener("click", handleClick);    return () => {      document.removeEventListener("click", handleClick);    };  }, []);  return <div>Hello, World!</div>;}export default App;

在这个示例中，我们在组件的useEffect钩子函数中注册了一个点击事件监听器，并在事件处理函数中使用Beacon API将事件数据发送到服务器。同时，由于我们只需要在组件挂载时注册事件监听器，因此我们使用useEffect钩子函数进行注册和注销。

类似地，我们也可以在Vue中使用Beacon API进行埋点，以下是一个示例：

<template>  <div>    <p>示例埋点组件</p>  </div></template><script>export default {  mounted() {    const handleClick = (event) => {      // 获取点击的元素信息      const target = event.target;      const tagName = target.tagName;      const text = target.innerText;      // 准备要发送的数据      const data = {        type: 'click',        tagName: tagName,        text: text      };      // 使用Beacon API发送数据      navigator.sendBeacon('/track', JSON.stringify(data));    };    // 添加点击事件监听器    document.addEventListener('click', handleClick);  },  beforeUnmount() {    // 在组件卸载之前移除事件监听器    document.removeEventListener('click', this.handleClick);  }};</script>

在这个示例中，我们在组件的mounted生命周期钩子函数中注册了一个点击事件监听器。当发生点击事件时，将调用handleClick函数。在handleClick函数内部，我们获取被点击元素的信息，并准备要发送的数据。

然后，我们使用Beacon API将数据发送到服务器，通过调用navigator.sendBeacon('/track', JSON.stringify(data))来发送数据。数据以JSON字符串的形式发送到/track端点。

同时，我们在组件的beforeUnmount生命周期钩子函数中移除了事件监听器，以确保在组件卸载之前进行清理操作。

请注意，与React示例类似，这个示例假设您已经在服务器端设置了用于处理接收到的数据的端点/track。您需要根据需求实现服务器端的逻辑，以相应地处理和存储接收到的埋点数据。

这个示例演示了在Vue中使用Beacon API进行埋点的方法，类似的方法也可以应用于其他前端框架，通过注册和移除事件监听器以及使用Beacon API来实现埋点功能。

5、Beacon API的兼容性、优势和缺点

Beacon API的兼容性

Beacon API在所有主流浏览器中都得到支持，包括Chrome、Firefox、Safari等等。然而，在一些低版本的浏览器中可能存在兼容性问题，需要进行相应的兼容性处理。建议检查浏览器的兼容性，并为不支持的浏览器提供备用方案或替代方法。

Beacon API的优势

Beacon API提供了几个优势，用于数据传输和跟踪：

a) 异步数据传输：Beacon API允许数据异步发送，不会阻塞或延迟主线程。这确保了数据发送不会影响用户体验或页面性能。

b) 可靠的数据传递：Beacon API提供了可靠的数据传递机制，即使在用户离开页面或关闭浏览器的情况下也能正常工作。它提高了传输的数据完整性和准确性。

c) 后台数据传输：Beacon API允许在后台发送数据，不会干扰用户在当前页面上的交互。这在需要实时跟踪或记录而不干扰用户体验的场景中特别有用。

d) 简单易用：Beacon API相对容易实现，代码和配置量较少。它提供了一种简单直接的方式，无需复杂的AJAX请求或手动处理数据传输，就能将数据发送到服务器端。

Beacon API的缺点

虽然Beacon API具有多项优势，但也有一些限制和注意事项：

a) 有限的数据负载：Beacon API对可发送的数据负载有大小限制，通常限制在几千字节，超过大小的数据可能会被截断或丢弃。如果需要发送大量数据，可能需要考虑其他方法。

b) 无响应处理：Beacon API在数据传输后没有提供来自服务器的响应或确认。它是一种发送即忘记的机制，无法得知数据是否成功被服务器接收或处理。

c) 缺乏请求定制化：Beacon API在请求定制方面的选项有限，例如指定请求头或HTTP方法。它依赖默认设置，可能无法满足需要对请求参数进行精细控制的高级用例。

d) 安全考虑：与任何数据传输机制一样，使用Beacon API时应考虑安全性。确保敏感数据得到适当处理，必要时进行加密，并通过安全连接进行传输。

总体而言，Beacon API提供了一种方便高效的方式来在后台异步发送数据。特别适用于需要非阻

6、 使用Beacon API的建议

在使用Beacon API时，需要注意以下几点：

a) 数据尽量保持小：为了确保快速传输，建议尽量减小数据的大小。

b) 目标URL可靠性：选择可靠的目标URL，以确保数据能够正确地发送到服务器。

c) 考虑数据的时效性：Beacon API可以在页面卸载或关闭时发送数据，因此需要考虑数据的时效性，判断是否在特定时刻发送数据。

d) 关注页面性能和用户体验：在使用Beacon API时，要关注页面性能和用户体验，避免干扰用户的正常操作，保证流畅的浏览体验。

5.2 Beacon API的注意事项 在使用Beacon API时，需要注意以下几点：

a) 处理兼容性问题：Beacon API可能存在兼容性问题，需要针对兼容性进行处理。

b) 数据加密和压缩：在使用Beacon API时，应对数据进行适当的加密和压缩，以确保数据的安全性和传输效率。

c) 关注服务器接收和处理能力：在使用Beacon API时，要注意服务器的接收和处理能力，避免出现服务器性能问题。

7、总结

Beacon API是一种新的浏览器API，可以在浏览器的后台异步发送数据，而不会影响当前页面的加载和性能。Beacon API可以用于页面性能监控、异常日志记录、用户行为跟踪等功能，具有一定的实际应用价值。在使用Beacon API时，需要注意数据的大小、目标URL的可靠性、数据的时效性、页面性能和用户体验，以及兼容性、数据安全和服务器端性能等问题。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。