很多文章都会说到网站速度对于用户转化的影响，速度慢的网站用户更容易离开，尤其是可以找到替代内容的情况下。
那么如何度量网站的加载速度呢，之前大家的做法是在页面的头部记一下时间：var start = new Date().getTime()，然后在页脚计算一下用掉的时间：var timeUse = new Date().getTime() – start，把这儿的timeUse用事件的方式提交到GA服务器：_gaq.push(['_trackEvent', 'timeUse', '/home.html', 'load', timeUse])，最后在GA的事件列表，看事件的平均值来评价页面的加载时间。
这样做，可以获得加载时间，但不完整，完整的页面加载是这样的：
1、用户打开url链接
2、浏览器查询url的dns地址
3、提交url请求到服务器端
4、服务器端处理
5、传输处理好的html文本内容到浏览器
6、浏览器解析html，并加载css，js，图片等内容
7、加载完成，用户看到完整的页面内容
前面的timeUse获取的其实是第6步操作的用时，2到5步的用时都无法获取，假设某个网站的dns查询慢，服务器端处理慢，还是会影响用户的体验，而这个是我们无法度量的。
其实dns查询，等待服务器处理等时间，作为浏览器是知道的，于是HTML5规范为这部分的查询，提供了接口，允许javascript来查询详细的用时，具体文档在这儿：https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html#sec-navigation-timing-interface，调用的例子见这儿：http://www.html5rocks.com/en/tutorials/webperformance/basics/，假设我们要获取当前页面的dns解析时间，只要：performance.timing.domainLookupEnd – performance.timing.domainLookupStart即可，目前支持该接口的浏览器有：firefox，chrome，IE9等对html5标准支持较好的浏览器。我实际看了一下我们站点的统计，firefox/chrome/IE9浏览器共占 38% 这样，不同类型网站因为用户群不同，这个比例会有差别。速度值可以作为参考，如果Chrome加载一个页面特别慢，可以认为IE6也快不到那里去，就该着手优化了。
评论