前端埋点方案

2023-06-05 18:36:57 浏览数 (1)

日常前端开发中,无论是性能监控,还是用户埋点,都会接触到埋点方案,以下为整理的几种方案:

一、ajax

因为上报埋点,其实也是一种接口调用,调用指定的URL,传递一些指定的参数

优点:

  • 兼容性好
  • 是异步的, 不会堵塞html解析
  • 支持post

缺点:

  • 当业务线增多时,不同的域名,需要解决跨域的问题

二、img

调用一个服务端指定的gif图片,服务端拦截该img,解析对应img后面的参数

优点:

  • 兼容性好
  • 不存在跨域问题
  • 不需要挂载html文档就可以请求img,同时避免反复操作dom
  • 不会堵塞html解析

缺点:

  • 不支持post,传递数据量有限

三、Navigtor.sendBeacon方法

主要用于将统计数据发送到服务端,避免了传统技术发送分析数据的问题

优点:

  • 不存在跨域问题
  • 不需要挂载html文档,避免反复操作dom
  • 异步的,不会堵塞html解析
  • 支持post,可以传递大量数据

缺点:

  • 存在兼容性问题,低版本浏览器不支持

当然,除了以上方案之外,其实,像script、link这种的也可以,但是会导致一个很严重的一个问题,需要挂载到html文档流上,否则就不会进行请求该script或link链接,进而导致上报丢失,同时还有就是需要来回操作dom而影响性能。

Navigtor.sendBeacon如果业务不考虑极低版本的浏览器的话,这个很不错的方案,否则的话,可以考虑和gif相结合的形式实现前端埋点方案。

0 人点赞