为什么前端监控要用 GIF 打点
栏目: JavaScript · 发布时间: 5年前
内容简介:作者大布(企业代号名),目前负责贝壳找房前端开发工作。
作者大布(企业代号名),目前负责贝壳找房前端开发工作。
1 背景
灯塔是贝壳找房前端架构组推出的一款前端监控系统, 最近和业务方对接时, 被问到了这样一个问题:
为什么前端监控要用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:
PNG:
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)
作 者:大布(企业代号名)
出品人:漠北鹰、旭东(企业代号名)
---------- END ----------
推荐阅读
以上所述就是小编给大家介绍的《为什么前端监控要用 GIF 打点》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端iOS打点统计的AOP技术实践
- 一种打点逻辑的实现方案
- 打点 API 和 bitsv 对数据上链的不同处理
- 麋鹿分布图制作(二)—— 用Python和R在地图上打点
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端科普系列(三):CommonJS 不是前端却革命了前端
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
旷世之战――IBM深蓝夺冠之路
纽伯 / 邵谦谦 / 清华大学出版社 / 2004-5 / 35.0
本书作者Monty Neworn是国际计算机象棋协公的主席,作者是用生动活泼的笔触描写了深蓝与卡斯帕罗夫之战这一引起全世界关注的历史事件的前前后后。由于作者的特殊身份和多年来对计算机象棋的关心,使他掌握了许多局外人不能得到的资料,记叙了很多鲜为人知的故事。全书行文流畅、文笔优美,对于棋局的描述更是跌宕起伏、险象环生,让读者好像又一次亲身经历了那场流动人心的战争。 本书作为一本科普读物......一起来看看 《旷世之战――IBM深蓝夺冠之路》 这本书的介绍吧!