笔记记录 —— 埋点数据上报方式

[EmiyaGm]

请求用img的src进行请求数据上报

为什么用 1x1 像素的 gif 图

1、没有跨域问题

2、发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据

3、不会携带当前域名 cookie！

4、不会阻塞页面加载，影响用户的体验，只需 new Image 对象

5、相比于 BMP/PNG 体积最⼩小，可以节约 41% / 35% 的网络资源大小

注意：埋点也许是有差异的，但是从错误监控等等方面，这样是没什么问题的

事件拦截和代理

事件拦截：委托到dom上面，利用img进行上报数据，navigator.sendBeacon方法

mousedown，touch，scroll，keydown

页面进入离开：onload，berorOnLoad

这块是埋点部分，通常能收集到用户的操作行为，页面停留时间，离开等等

navigator.sendBeacon会有兼容问题，所以需要做兼容性处理