常见的埋点上报方式有

  1. ajax
  2. img
  3. Navigator.sendBeacon

ajax

缺点: 一般而言,埋点域名并不是当前域名,因此请求会存在跨域风险,且如果 ajax 配置不正确可能会浏览器拦截。因此使用 ajax 这类请求并不是万全之策。

image

script,link,img 就是我们上报的数据的最好对象,但推荐使用 img,因为如果需要请求 script 和 link,我们需要将标签挂载到页面上。需要反复操作 dom,并且会阻塞渲染。

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

sendBeacon

navigator.sendBeacon()   方法可用于通过  HTTP POST  将少量数据异步传输到 Web 服务器。

sendBeacon 如果成功进入浏览器的发送队列后,会返回 true;如果受到队列总数、数据大小的限制后,会返回 false。返回 ture 后,只是表示进入了发送队列,浏览器会尽力保证发送成功,但是否成功了,不会再有任何返回值。

相较于 img 标签,使用 navigator.sendBeacon 会更规范,数据传输上可传输资源类型会更多。