华为角标api_信标API简介

最新推荐文章于 2024-05-21 10:55:02 发布

dingshi7798

最新推荐文章于 2024-05-21 10:55:02 发布

阅读量206

点赞数

文章标签： java ajax python js php ViewUI

原文链接：https://www.sitepoint.com/introduction-beacon-api/

版权

华为角标api

使用Beacon API，Web开发人员可以在当前页面卸载时轻松地将少量数据（例如分析或诊断数据）异步发送回服务器。在本文中，我们将探讨Beacon API所解决的一些问题，并向您展示如何使用API。

如果没有Beacon API，则当用户离开页面导航时将数据发送回服务器可能会比看起来复杂。您不想延迟下一页的加载，因为这会损害用户对您网站的体验。但是，您不想散布有助于改善站点的有价值的信息：过早发送数据可能意味着您散布了一些等待较长时间就可以捕获的有价值的信息。

一种典型的解决方案 ，可以在文档卸载时将分析数据发送到服务器，如下所示：

window.addEventListener('unload', function(event) {
  var xhr = new XMLHttpRequest(),
    data = captureAnalyticsData(event);

  xhr.open('post', '/log', false);
  xhr.send(data);
});

function captureAnalyticsData(event) {
  return 'sample data';
}

unload事件处理程序，它通过Ajax请求提交数据。当页面卸载事件触发时，将通过captureAnalyticsData函数捕获数据，并通过Ajax请求将其发送到服务器。注意， xhr.open的第三个参数为false ，指示Ajax请求是同步的 。浏览器通常会忽略在卸载处理程序期间发出的异步请求，因此任何此类Ajax请求都必须是同步的。因为它是同步的，浏览器必须等待请求完成才可以卸载文件并显示下一个页面。这种额外的等待可能会导致性能下降的感觉。

代替同步Ajax请求使用的其他技术包括在卸载处理程序中设置Image对象的src 。浏览器将在加载文档之前等待Image加载，在此期间可以将数据提交到服务器。然而，这仍然有同样的问题：当前文档的卸载将同时请求被推迟，此时为Image ，完成，这可能会导致性能不佳的印象。

创建信标API就是为了帮助解决这些问题。它定义了一个接口，使开发人员可以将少量数据异步发送到Web服务器。它仅包含一个附加到navigator对象的方法sendBeacon 。 sendBeacon具有两个参数，您要向其提交数据的URL和要提交的数据：

window.addEventListener('unload', function(event) {
  var data = captureAnalyticsData(event);
  navigator.sendBeacon('/log', data);
});

数据是通过HTTP POST请求提交的，可以作为ArrayBufferView ， Blob ， DOMString或FormData对象发送。浏览器将请求放入队列，然后“在可能的最早时机将其发送，但可以优先于比其他网络流量低的数据传输”。（根据W3C规范）。如果数据已成功提交到服务器，则sendBeacon返回true否则返回false 。

对navigator.sendBeacon支持在主要的桌面浏览器中都不错。您会发现它在当前版本的Chrome，Firefox和Opera中受支持，但在最新版本的IE和Safari中不受支持。但是，由于无法保证其可用性，因此最好的办法是使用功能检测和回退到页面卸载时提交数据的一种旧方法：

window.addEventListener('unload', function(event) {
  var xhr,
      data = captureAnalyticsData(event);

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log', data);
  } else {
    xhr = new XMLHttpRequest();
    xhr.open('post', '/log', false);
    xhr.send(data);
  }
});

我创建了一个小示例应用程序，您可以使用它来查看运行中的Beacon API。您需要安装Node.js才能运行服务器。要运行示例：