概念
埋点是将用户在 App 或者网页上各种行为记录下来并且上报的机制。埋点能有效的记录用户各式各样的行为，帮助我们更好的了解用户在我们平台的上行为习惯和使用体验。
埋点类型
常见的埋点类型有：
- 行为埋点：页面/APP 上的各种操作行为。
- 性能埋点：页面/APP 加载、渲染、交互等性能指标。
- 页面埋点：PV、UV 统计。
- 点击埋点：用户点击的按钮、链接等。
上报方式
1. Ajax 请求
发送 XHR 请求到服务器，将数据上报。
缺点：请求会存在跨域风险，需要服务器配置 CORS。
2. img 标签
// new Image() 创建图片对象，并设置 src
const img = new Image(1, 1);
img.src = 'xxx';
// 或者 createElement('img')
const img = document.createElement('img');
img.width = 1;
img.height = 1;
img.src = 'xxx';
img.onload = img.onerror = () => {
/** */
};
img 方式没有跨域限制，兼容性好。
缺点：绝大多数浏览器会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。导致用户体验可能不好。
3. Navigator.sendBeacon
navigator.sendBeacon(url, data);
- sendBeacon 发出的是异步请求，并且是 POST 请求；不会和主要业务代码抢占资源，而是在浏览器空闲时去做发送；并且在页面卸载时也能保证请求成功发送，不阻塞页面刷新和跳转；
- 不存在跨域问题。
缺点：兼容性不好。
总结
前端埋点上报常使用 ajax，img，navigator.sendBeacon。不推荐使用 ajax。如果考虑兼容性的话，img 是不二之选。
目前最合适的方案是 navigator.sendBeacon，不仅是异步的，而且不受同域限制，而且作为浏览器的任务，因此可以保证会把数据发出去，不影响页面卸载。
