首先,确定页面速度如何监控?监控什么指标?如何分析?领导的基本需求如下:
实现全国各地用户访问速度的按区域分析
实现用户从浏览器开始请求到页面加载完毕的每一步骤的指标统计
实现对定点区域的任务下发
到底咋做?刚开始想的是,能否通过分析网站日志来实现呢?尼马,当然不可能这么简单,因为日志里最多只能记录服务器收到请求到开始响应的时间,用户何时完全加载完你的页面,是找不到的。
那咋办?先学习基调的监测方法发现,他们是在全国各个机房里埋了数万个客户端,让这些客户端定时自动访问你的网站,然后再对每个客户端的加载速度做汇总后分析。很显然我们不可能在全国各个机房放一台机器当客户端,那样的花费非得把公司卖了不行。本着花小钱办大事的思想,灵光一现,为什么不让用户直接帮我们测?我们网站每天数亿PV,这么好的资源不用就白浪费了。
咋让用户帮我们测?呵呵,很简单,在页面埋码,在用户访问我们页面的时候,浏览器会自动运行一段JS脚本,会纪录从浏览器开始请求到整个页面加载完毕的过程。然后我的脚本把这些纪录的值做成一个字典,统一用GET的方式发送到后台分析接口,后台分接程序接到数据进来后就按相应的分析维度做分析,然后,然后问题就解决了嘛。
GOOD,既然以为逻辑能走通,那就开始测试下吧,废话少说上干货,以下为实现过程:
前端埋码
首先确定收集以下指标
onLoad页面加载时间
页面下载时间
JS加载时间
从request开始到服务器响应时间
DomReady时间
第一次渲染时间(白屏时间)
DNSlookup时间
从服务器下载第一个byte时间
导航类型
请求的url
浏览器类型
浏览器版本
分辨率
以上指标只是第一期功能,以后可能还会加很多新的指标,完全靠自己写JS来实现挺麻烦的,尼马我是运维开发呀,不是搞前端的呀,这么多东西怎么弄,果断寻找开源解决方案,找来找去找到了yahoo开源的一个页面速度指标收集的小插件boomerang,下载下来用了下发现很强大,支持自行开发plugin,于是就在他的基础上做了些更改,自己加入了一些自定义指标的收集。
为了帮助看客了解,先跟大家说一下,以上指标如何收集?一个HTML页面从开始服务器请求,到整个页面展现在用户面前,其实是经过好多个步骤的,擦,干说好累,还是上图吧。
如上图,页面整个加载过程一般为:
输入网址回车navigationStart
DNS解析,获取网站IP地址domainLookupStart
向服务器IP发起请求,TCP/IP3次握手,建立连接ConnectStart
服务器开始处理用户请求页面的URLResponseStart
向用户发送第一个字节FristByte
DOM加载完毕domComplete
Onload事件开始LoadEventtart
页面加载完毕LoadEventEnd
亲,知道么,现在基本上所有的主流浏览器都会在页面加载的时候把这些指标记录下来,你可以直接在JS脚本里调用。调用方法等详细指标解释请看中科白癜风公益活动中科白癜风公益活动