为什么前端监控要用 GIF 打点

标签: tuicool | 发表时间:2018-12-23 00:00 | 作者:
出处:http://itindex.net/relian

为什么前端监控要用GIF打点?

这个问题很有意思。我们知道,目前主流的前端监控(百度统计/友盟/谷歌统计)都在用GIF进行打点。但是,为什么这些系统都会使用GIF,难道是因为没有其他的解决方案吗?

这得从前端监控的原理说起。

2前端监控的原理

所谓的前端监控,其实是在满足一定条件后,由Web页面将用户信息(UA/鼠标点击位置/页面报错/停留时长/etc)上报给服务器的过程。一般是将上报数据用url_encode(百度统计/CNZZ)或JSON编码(神策/诸葛io)为字符串,通过url参数传递给服务器,然后在服务器端统一处理。

这套流程的关键在于:

1)能够收集到用户信息;

2)能够将收集到的数据上报给服务器。也就是说,只要能上报数据,无论是请求GIF文件还是请求js文件或者是调用页面接口,服务器端其实并不关心具体的上报方式。

向服务器端上报数据,可以通过请求接口,请求普通文件,或者请求图片资源的方式进行。为什么所有系统都统一使用了请求GIF图片的方式上报数据呢?

可能的方式

3为什么主流方案用GIF上报数据

解答这个问题,要用排除法。

首先,为什么不能直接用GET/POST/HEAD请求接口进行上报?

这个比较容易想到原因。一般而言,打点域名都不是当前域名,所以所有的接口请求都会构成跨域。而跨域请求很容易出现由于配置不当被浏览器拦截并报错,这是不能接受的。所以,直接排除。

可能的方式_排除接口请求

其次,为什么不能用请求其他的文件资源(js/css/ttf)的方式进行上报?

这和浏览器的特性有关。通常,创建资源节点后只有将对象注入到浏览器DOM树后,浏览器才会实际发送资源请求。反复操作DOM不仅会引发性能问题,而且载入js/css资源还会阻塞页面渲染,影响用户体验。

但是图片请求例外。构造图片打点不仅不用插入DOM,只要在js中new出Image对象就能发起请求,而且还没有阻塞问题,在没有js的浏览器环境中也能通过img标签正常打点,这是其他类型的资源请求所做不到的。

所以,在所有通过请求文件资源进行打点的方案中,使用图片是最好的解决方案。

可能的方式_排除文件请求

那还剩下最后一个问题,同样都是图片,上报时选用了1x1的透明GIF,而不是其他的PNG/JEPG/BMP文件。

这是排除法的最后一步,原因其实不太好想,需要分开来看。

首先,1x1像素是最小的合法图片。而且,因为是通过图片打点,所以图片最好是透明的,这样一来不会影响页面本身展示效果,二者表示图片透明只要使用一个二进制位标记图片是透明色即可,不用存储色彩空间数据,可以节约体积。因为需要透明色,所以可以直接排除JEPG(BMP32格式可以支持透明色)。

然后还剩下BMP、PNG和GIF,但是为什么会选GIF呢?

因为体积!

下方是1x1像素透明图,最小的BMP/PNG/GIF文件结构。

BMP:

BMP

PNG:

PNG

GIF:

GIF

可以看到,最小的BMP文件需要74个字节,PNG需要67个字节,而合法的GIF,只需要43个字节。

同样的响应,GIF可以比BMP节约41%的流量,比PNG节约35%的流量。这样比较一下,答案就很明显了。

上报数据,显然GIF才是最佳选择。

可能的选择_最终结果

4总结

前端监控使用GIF进行上报主要是因为:

  • 没有跨域问题;

  • 不会阻塞页面加载,影响用户体验;

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

最后,感谢提供支持的各位大佬:

@周晨   提出了这个问题;

@大董   指出加载图片不需要操作DOM,性能更好;

@CC老师 指出在没有JS的环境中,只有图片打点才能正常工作(GET方式需要用户触发);

@丸九   介绍了各种图片格式的特点,解释了为什么一定要1像素透明图;

@伍子胥 查阅了网上的资料,并确认关键因素:文件体积。

5参考资料

1)StackOverflow上的相关讨论

(https://stackoverflow.com/a/2083179/4197333)

2)Smallest possible transparent PNG

(http://garethrees.org/2007/11/14/pngcrush/)

3)Github上有人收集了常见文件类型最小体积的demo

(https://github.com/mathiasbynens/small)

4)Wikipedia_BMP

(https://zh.wikipedia.org/wiki/BMP)

5)PNG格式解析

(http://dev.gameres.com/Program/Visual/Other/PNGFormat.htm)

6)GIF图像文件格式

(http://read.pudn.com/downloads209/doc/984072/GIF%E5%9B%BE%E5%83%8F%E6%A0%BC%E5%BC%8F/GIF%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F.pdf)

7)最小尺寸的透明图片

(http://kaifage.com/notes/56/minimum-transparent-image.html)

相关 [前端 监控 gif] 推荐:

为什么前端监控要用 GIF 打点

- - IT瘾-tuicool
为什么前端监控要用GIF打点?. 我们知道,目前主流的前端监控(百度统计/友盟/谷歌统计)都在用GIF进行打点. 但是,为什么这些系统都会使用GIF,难道是因为没有其他的解决方案吗. 所谓的前端监控,其实是在满足一定条件后,由Web页面将用户信息(UA/鼠标点击位置/页面报错/停留时长/etc)上报给服务器的过程.

前端必会技能-gif动画图片制作

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2924. //zxx: 标题没有任何意思,当然,本作选入中学语文教科书另当别论. 今天微博上晒支付宝年支付的人爆棚,看着自己可怜巴巴的那点支出,实在不好意思拿出来;尤其对比 @老赵 10万+的支出. 除了这个,我还对活动页面上右上角,动啊动的效果感兴趣:.

前端性能监控系统ShowSlow

- - CSDN博客Web前端推荐文章
作者:zhanhailiang 日期:2014-11-14. ShowSlow是开源的前端性能监控系统,提供了以下功能:. 前端性能指标数据收集功能:ShowSlow原生提供了数据收集工具. DOM Monster!,但也支持通过YSlow,PageSpeed等第三方工具将性能数据上报给服务端完成收集(其服务器端提供了针对多达8种不同工具上报的数据收集器dommonster,dynatrace,events,har,metric,pagespeed,webpagetest,yslow);.

搭建前端异常监控系统

- - 掘金 架构
收集前端错误(原生、React、Vue). 利用Egg.js编写一个错误日志采集服务. 编写webpack插件自动上传sourcemap. 利用sourcemap还原压缩代码源码位置. 代码上线打包将sourcemap文件上传至错误监控服务器. 发生错误时监控服务器接收错误并记录到日志中. 根据sourcemap和错误日志内容进行错误分析.

前端监控系统设计

- - 掘金 前端
前言: 创建一个可随意插拔的插件式前端监控系统. 使用window.addEventListener('error',cb). 由于这个方法会捕获到很多error,所以我们要从中筛选出静态资源文件加载错误情况,这里只监控了js、css、img. // 捕获静态资源加载失败错误 js css img window.addEventListener('error', e => {.

【GIF】 Davidope超炫的GIF作品

- 浩 - 廉清波
这些让人看了头晕的 GIF 动画出自设计师 Davidope之手. dvdp 是两家设计工作室的创意总监以及老板,他说自己喜欢生活在危险中,因为他一天要喝掉两公升的可乐并抽掉两包烟,进来看看,一起头晕吧. 新鲜提示:如果你喜欢连战的这篇文章,请点击文章底部的 “推荐” 或 “引用” 按钮把文章收藏到自己的博客.

GIF vs APNG vs WebP

- - JayXon
GIF 是一个非常古老的格式,1987 年诞生,最后一个版本是 1989 年. (这就是为什么 GIF 文件头的 magic number 是 GIF89a). APNG 相对新一些,是 Mozilla 在 2004 年推出的,十几年的科技进步是不容小觑的,所以 APNG相对于 GIF 的优势十分明显,后面会分析.

周末gif福利08.27

- Leo - 热豆腐
欢迎光临热豆腐的小店,每月图片合集只要1块钱. 猛击查看原文:http://www.redoufu.com/2011/08/27/weekly-gifs-2/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

周末gif福利08.28

- Leo - 热豆腐
欢迎光临热豆腐的小店,每月图片合集只要1块钱. 猛击查看原文:http://www.redoufu.com/2011/08/28/weekly-gifs-3/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

每周GIF福利08.21

- Kindy - FeedzShare
来自: 热豆腐 - FeedzShare  . 发布时间:2011年08月21日,  已有 2 人推荐. 热豆腐计划推出周末福利计划,将会挑选一些好玩的动态gif图分享给大家. 由于动态图比较大,加载可能有点慢,可以先打开然后干点别的,一会儿再过来看,很欢乐的哦~. 猛击查看原文:http://www.redoufu.com/2011/08/21/weekly-gifs/.