日常前端开发中,无论是性能监控,还是用户埋点,都会接触到埋点方案,以下为整理的几种方案:
一、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相结合的形式实现前端埋点方案。