前端埋点方案

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

一、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相结合的形式实现前端埋点方案。