前端性能监控与分析


fore-end

1.什么是前端?

对于网站来说,通常是指网站的前台部分包括网站的表现层和结构层,也就是Web应用中用户可以看得见碰得着的东西。


2.为什么要做前端性能监控?

根据《高性能网站建设指南》上的数据,整个页面的加载可以划分为 3 大块:网络时间、后端时间、前端时间,发生在网络和后端的时间占到整体加载时间的 10% 和 20%,而前端资源加载时间占到整体加载时间的 70% ~ 80%。

前端资源加载是否快速对性能影响是最大的,这里面资源的加载顺序,并发数量,都有很多的工作可做:比如,如果你发现 CSS 加载之前的阻塞时间很长,那很可能是资源加载顺序不合理,这必然会导致浏览器渲染延后。


3.前端性能监控指标

• 白屏时间:用户从打开页面开始到页面开始有东西呈现为止

• 首屏时间:用户浏览器首屏内所有内容都呈现出来所花费的时间

• 用户可交互时间:用户可以进行正常的点击、输入等操作,默认可以统计domready时间,因为通常会在这时候绑定事件操作

• 总下载时间:页面所有资源都加载完成并呈现出来所花的时间,即页面 onload 的时间

确定统计起点

我们需要在用户输入 URL 或者点击链接的时候就开始统计,因为这样才能衡量用户的等待时间。高端浏览器Navigation Timing接口;普通浏览器通过 cookie 记录时间戳的方式来统计,需要注意的是 Cookie 方式只能统计到站内跳转的数据。


4.性能监控工具

由于收集数据的方式和目标不一样,前端性能监控主要分为非侵入式式和侵入式两种。

类型 优点 缺点 示例
非侵入式 指标齐全、客户端主动监测、竞品监控 无法知道性能影响用户数、采样少容易失真、无法检测复杂应用与细分功能 Yslow、Pagespeed、Dynatrace、Fiddler、webpagetest(线上)、gtmetrix(线上)
侵入式 真实海量用户数据、能监控复杂应用与业务功能、用户点击与区域渲染 需插入脚本统计、网络指标不全、无法监控竞品 Navigation Timing API、Resource Timing API

对于统计脚本需要满足两个条件:

(1)避免对业务代码的入侵;

(2)不影响被测量的页面的性能;

4.1非侵入式

(1)pagespeed

是谷歌开发的分析和优化网页的工具,可以作为浏览器插件使用。工具基于一系列优化规则对网站进行检测,对于未通过的规则会给出详细的建议。

(2)Yslow

是Yahoo发布的一款基于FireFox的插件。

推荐使用 gtmetrix网站同时查看多个分析工具的结果。

(3)WebPagetest

WebPageTest 是一款非常优秀的网页前端性能测试工具,已开源。可以使用在线版,也可以自己搭建。

使用 WebPagetest,你可以详细掌握网站加载过程中的瀑布流、性能得分、元素分布、视图分析等数据。其中比较直观的视图分析功能可以直接看到页面加载各个阶段的截屏:

4.2侵入式

(1)Navigation Timing API

监测主文档加载速度,该API提供一种简单的获取页面被导航或被加载时的时间及相关信息的方法。目前为止,在Internet Explorer 9、Google Chrome以及Firefox nightly Builds浏览器中对该API提供支持。

(2)Resource Timing API

可监测静态资源加载速度。

需要特别提示的是,如果你使用 CDN 的话,需要让 CDN 服务商加上 Timing-Allow-Origin 的响应头,才能拿到静态资源的数据。

5.总结

在前端性能调优领域还有很多细节值得探索和挖掘,本文抛砖引玉,希望能为大家分析前端提供一些思路。

注:本文部分摘自《7天打造前端性能监控系统》和《美团性能分析框架和性能监控平台》

 

Top