为什么需要埋点

互联网 2.0 时代的产品比较喜欢讲究千人千面，运营与产品团队非常注重观察用户使用产品的行为轨迹，从而能够精准推荐到“猜你喜欢”。研发团队也会非常关注产品的性能和异常，确保产品的高性能以及高安全性。

埋点 & 上报

埋点（监控）内容

  • 用户数据

    • PV / UV
    • 点击位置 / 浏览位置 / 浏览时间
    • 入口
    • 触发的行为
    • ……

  • 页面性能

    • 不同用户不同机型不同系统加载时间
    • 接口请求时间 / 页面渲染时间
    • ……

  • 系统异常

    • 系统报错
    • ……

上报

常见上报方式：

  • 请求接口

  • 请求普通文件

  • 请求图片

弊端：

  • 请求接口：场景复杂，容易出现跨域

  • 请求普通文件（js/css/ttf 等）：浏览器创建 DOM 树之后才会请求资源节点，大量请求 js/css 等资源还会阻塞页面渲染

选择图片打点的原因：

图片打点不需要操作 DOM，得利于 img 的 src 属性，只需要在 js 中 new 一个 image 对象就可以发起请求，而且也没有页面阻塞的问题，且页面关闭的时候，采用 img 发出的请求也不会被取消。


let img = new Image();
img.src = 'https://static.example.com/track.gif?data=xxx';

图片为什么选择 GIF

同样是 1x1 像素的透明图片，GIF 的体积最小。

  • 最小的 BMP 文件需要 74 个字节
  • 最小的 PNG 需要 67 字节
  • 最小的 GIF 需要 43 字节

前端埋点选择 GIF 的主要原因

  • 不跨域
  • 不阻塞页面加载
  • 体积小
  • 闭页面的时候图片的请求还能发出去