前端埋点常用方法

1. 使用场景

　　主要用于数据采集，如：性能分析，用户行为分析，日常信息采集，测试信息采集等。指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。

2. 方法

　　常见的埋点上报方式有ajax，img，navigator.sendBeacon。这些都是需要发送到服务端的，也可以采用本地存储等方式保存到客户端，然后通过一些手动计算、导出，甚至可以等分析完之后再上报分析结果等。我在一个项目种分析界面性能就是采用的本地缓存，不涉额外的服务请求。

2.1 ajax

　　即编写一个发送ajax请求的方法，在想要埋点的地方直接调用发送。

2.2 img

　　主要因为可以通过支持跨域的标签来达到效果，主要有script，link，img，但是前两者必须要append到页面dom中后才会加载，而img可以在指定src之后就加载，所以为了不影响dom和阻塞加载，优先考虑img。使用方法：

1 var img=new Image();
2 img.src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/MaskGroup.13dfc4f1.png";

2.3 Navigator.sendBeacon

　　目前通用的埋点方案，有两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据(可选)，可以是任意类型(字符串、表单对象、二进制对象等等)。

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

3.对比

　　ajax：缺点是容易跨域，且可能失败，需要考虑失败场景，可能需要同步(避免异常中断)；

　　img： 兼容性好，不操作dom，不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。而且，通常埋点上报会使用gif图，合法的 GIF 只需要 43 个字节；

　　Navigator.sendBeacon：更规范，异步，可跨域，对页面的影响几乎没有。

部分摘自掘金：https://juejin.cn/post/7224132741997281338