度量网页加载性能的几个时间指标

原文地址：http://rdc.taobao.com/blog/cs/?p=1029

度量网页加载性能的几个时间指标

by 远超 — Categories: CDN — Tags: 网页性能 — 9 Comments

　　AliPage是一款网页性能探测工具，该工具对下发任务指定的URL进行探测。可以获得本地浏览器下载并展现指定网页的网页对象元素 信息，包括下载网页中的图片和js等网页对象所需的DNS解析用时（DNS Time）、TCP连接用时（Socket Time）、对象下载开始时间（FirstByte Time）、下载完成用时（Download Time）、下载该对象的发送（Out）和接收数据大小（In）、该对象所在服务器的IP、Http响应状态代码 （Response Code），整个网页的渲染开始时间（TTSR(time to start render)）、网页文档下载完成时间(TTDC(time to document complete))和完全加载时间（TTFL(time to full loaded)）。其中直接上报的数据包括开始渲染时间、网页文档下载完成时间、完全加载时间和响应的状态码。

       开始渲染时间(TTSR) ： 当 浏览器访问某个网页时，从客户端开始发起请求，到客户端浏览器开始看到非空网页对象。用户越早看到浏览器的内容，心理上的等待时间就越短。获得该时间点的 方式：在网页请求过程中，会出现一些状态的切换，包括READYSTATE_UNINITIALIZED、READYSTATE_LOADING、 READYSTATE_LOADED、READYSTATE_INTERACTIVE、READYSTATE_COMPLETE等状态，首先判断当请求状 态是否为READYSTATE_INTERACTIVE或READYSTATE_COMPLETE，其次获得当前已经得到的网页元素、body体，如果都 存在则认为已经开始渲染。这样判断开始渲染时间实际上并不准确，不同网页的开始渲染时间与网页本身的设计、客户端的环境有很大关系。例如如果客户端繁忙， 即使已经有一些网页元素下载完毕，浏览器并不一定开始渲染；有的网站一张图片会被切成很多小的图片，这样一张图片的一部分即可以开始渲染，不必等待整张图 片全部download之后才开始渲染，有的网页则没有做这样的优化。

　　网页文档下载完成时间(TTDC) ： 文 档加载完成时间，一般来说是指DOM结构加载完成，等价于浏览器onload()事件的触发点。documentcomplete()事件可以捕捉到该时 间点，但是对于一个网页，该事件与每一个frame对应，所以一个网页会有多次documentcomplete()事件触发。记录该时间点时可以首先判 断当前被触发的documentcomplete()事件是否是最后一次被触发(最上层的frame完成)，然后记录该时间点，并且把过程中每一个 request相关的数据写入文件，不必每次该事件触发时都去写文件。

　　完全加载时间(TTFL) ： 顾 名思义，是指整个网页完全加载的时间。但是，严格地说，该时间点并没有严格的定义，当网页文档下载完成后(onload事件之后)，会有后续的JS脚本、 图片等请求继续运行，JS脚本和图片、视频等元素在何时被请求、下载取决于网页本身的设计。目前AliPage计算该时间的方式为，onload事件之后 5s内最后一个http请求活动的时刻为完全加载截止时刻，此时，可能会有新的请求还没被触发、已经发出的请求未返回的情况存在。

　　一种获取该时间的算法，在三种情况下认为网页已经完全加载：

　　第一，在设定的时间间隔内(2s)没有新的请求则认为已经完全加载；

　　第二，在设定的时间间隔(2s)内没有新的请求，并且在设定的时间间隔(30s)内，onload事件之前的请求在30s内没有新的数据传送活 动，则认为已经完全加载。

　　第三，在onload事件之后一定时间间隔内(2s)有新的请求，并且这些请求在一定时间内(60s)内没有新的数据传送活动，则认为已经完全 加载。

　　对于某些页面，例如带有视频、大文件的页面，完全加载时间的价值并不大，所以我们采用何种策略、对各个时间间隔大小的设定要根据我们拿到这个数 据后的用途来确定，这样拿到的数据才更有针对性的意义。