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
标签：常用,img,前端,发送,ajax,sendBeacon,埋点,加载 From： https://www.cnblogs.com/ljwsyt/p/17640139.html