参考：

1. 为什么前端监控要用GIF打点
2. 数据埋点、打点……到底是啥？

问题背景

开发Web项目过程中，涉及到需要进行打点。被传授经验可以根据GIF类型网络请求确认打点状态。就疑惑了，GIF类型网络请求与打点有什么关系？又为什么要打点？

为什么打点

打点，也被叫做“埋点”。在特定点提前设置好一段处理逻辑，当用户行为触发这个特定点时，预置的处理逻辑执行，记录下用户的一次行为。这属于前端监控的一种，目前，主流监控均采用GIF方式进行打点。

从产品层面来讲，打点主要从以下维度记录用户数据：

• 何人：用户姓名、手机号、邮箱等基础信息，用户来源等
• 何时：触发打点的时间、用户状态（登录态、会员态...）等
• 何处：平台（APP、Web、H5、小程序等）、页面（路由地址）、流量来源（三方合作平台、自有平台...）
• 何事：用户行为（点击、下载、分享、停留...）

从技术层面来讲，打点，就是将Web端的用户信息通过网络请求的方式发送到服务端，再由服务端统一处理。发送到服务端的方式有多种：请求接口、请求普通文件、请求图片资源等。为什么GIF方式成为了主流呢？

GIF为何胜出

1. 请求文件资源没有跨域问题

   • 打点域名通常不是网页的当前域名，所以网络请求就成了跨域请求，容易因为配置不当导致请求被浏览器拦截并报错；而请求资源不存在跨域问题

2. 图像类型资源不会阻塞页面加载，影响用户体验

   • 请求其他类型文件资源（js/css/ttf）受限于浏览器的资源加载机制。只有将创建的资源节点插入到DOM树，浏览器才会真正的去请求资源。但是频繁操作DOM会引发性能问题，并且加载js/css资源还会阻塞页面渲染，影响用户体验。
   • 请求图片资源无需操作DOM树，只要创建Image对象就可以发起请求，也不会阻塞页面渲染。在没有js的浏览器环境中也能通过img标签正常打点。

3. GIF在所有图片中体积最小，相较BMP/PNG，可以节约41%/35%的网络资源。