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

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

2011年06月16日 星期四 上午 11:48

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)内没有新的数据传送活动，则认为已经完全加载。

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