甚至是海外

发布时间:2018-10-15 13:53:08
利用HTML5监控网站性能

图1 HTML5性能指标(图片引用自W3C官方网站)

对于携程,我们最主要监控的指标有下面几种。

1. Total总时长:从页面跳转开始至页面onLoad;

2. DNS域名解析时长:从发起页面域名解析至解析完成;

3. Connect建立与服务器TCP连接时长:从发起TCP连接至三次握手完成;

4. Request请求时长:从发起页面请求至服务器端返回第一个字节;

5. Response响应时长:从接收服务器发回的第一字节至主页面下载完成;

6. DomReady页面Dom树解析:从页面跳转至页面Dom元素稳定。

接下来我们看看客户端数据采集的优势与劣势。

优势

•真实的客户访问性能数据。客户在访问网站的同时,可能还在做很多其他操作,并且可能还有很多其他的网络应用占用带宽,真实的用户数据对于了解客人感受具有代表性。

•能区分浏览器、操作系统平台。时下,用户使用着各种各样的外壳浏览器和自定义浏览器,而普通的测试无法覆盖到如此复杂的网站浏览环境,因此这部分数据尤其珍贵。

•覆盖范围广,且地域分布较均衡。相比第三方,我们能依靠JavaScript收集到各个地域的数据,甚至是海外,规模越大的网站,越有意义,能反映用户当地的网络状况,获知CDN加速效果等。

•浏览器原生支持,精度高。毫秒级的精度对于网络DNS、Connect时间,以及浏览器初始化事件执行时间有很大的意义。

劣势

•对于旧版本浏览器无能为力。性能数据采集需要HTML5的支持,对于IE6、IE7、IE8,不支持这一标准是其最大硬伤,不过得益于HTML5的推进速度,随着高版本浏览器的发布,这个问题会逐渐淡化,并不需要我们操心。

•需要部署少量JavaScript代码。类似于Google Analyze的代码加载机制,需要在每个页面的底部嵌入代码,工作量取决于网站架构,如果有统一的页脚,工作量其实很小。

•无法重现。由于数据来自客户,当时的状态无法保留,很难模拟客户的环境,会对于排错有一定的影响。

携程网的最佳实践

携程在数据采集方面已累积了一定经验,主要实现思路与环境搭建如图2所示。

图2 主要的实现思路与环境搭建

注:相关网站建设技巧阅读请移步到建站教程频道。

推荐阅读/观看:武汉网站制作 https://www.666rj.com