前端埋点数据上传的一些方式

这种使用方式其实就是约定一个接口，然后通过提交请求去进行数据上报的，如：

function buryingPoint(data) {
  return new Promise((resolve, reject) => {
    // 创建XMLHttpRequest
    const xhr = new XMLHttpRequest();
    // 定义请求接口
    xhr.open("post", '/buryingPoint', true);
    // 发送数据
    xhr.send(data);
  });
}
let info = {}
buryingPoint(info) // 这样就成功上报了info的对象

当我们去调用这个buryingPoint方法时，也就将数据进行了服务端的上报了。

但是，这种传统方式的请求埋点，一般会存在跨域的风险，并且他必须是同步的，否则会容易中断请求。

二、 script及link

通过以传统的请求方式进行数据埋点我们可以看出，实现数据上报并不强调前后端的交互的，因此我们也可以通过一些支持跨域的标签去实现数据上报功能。如：

let a = document.createElement('script')
a.src = 'https://www.test.com/web/buryingPoint/test.js?test=123'
document.body.appendChild(a)

创建一个script标签，src地址后面带上我们需要传递的数据，并将这个标签挂载中页面，这样就实现script+link方式的数据上报。

使用script标签还有一个好处就是，它是兼容的，可以适应不同的浏览器。

但是css点击后停留的事件，这种方式也有缺点，那就是需要挂载到页面上，而反复操作dom会造成页面性能受影响，并且载入js/css资源还会阻塞页面渲染，影响用户体验，频繁上报是不适合这种方式的。

三、 img

不同于script标签css点击后停留的事件，使用img标签的好处是，无需挂载到页面上，反复操作dom；而且img的加载不会阻塞html的解析，img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。

注：通常埋点上报会使用 gif 图，合法的 gif 图只需要 43 个字节

如：

function buryingPoint(src) {
    var img = document.createElement("img");
    img.src = src;
}
buryingPoint('https://www.test.com/web/buryingPoint/test.gif?test=123')

我们除了img标签还可以使用new image()，设置其src之后就可以直接请求图片。

四、 Navigator.sendBeacon

Navigator.sendBeacon是目前通用的埋点上报方案，Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。

过去，为了解决这个问题，统计和诊断代码通常要在

1、发起一个同步 XMLHttpRequest 来发送数据。

2、创建一个 元素并设置 src，大部分用户代理会延迟卸载（unload）文档以加载图像。

3、创建一个几秒的 no-op 循环。

上述的所有方法都会迫使用户代理延迟卸载文档，并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力。

这就是 sendBeacon() 方法存在的意义。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能，这意味着：

1、数据发送是可靠的。

2、数据异步传输。

3、不影响下一导航的载入。