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

标签: CDN 网页性能 | 发表时间:2011-06-07 10:34 | 作者:远超 sayhelen
分享到:
出处:http://rdc.taobao.com/blog/cs

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

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

相关 [度量 网页 性能] 推荐:

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

- sayhelen - 淘宝核心系统团队博客
  AliPage是一款网页性能探测工具,该工具对下发任务指定的URL进行探测. 其中直接上报的数据包括开始渲染时间、网页文档下载完成时间、完全加载时间和响应的状态码.        开始渲染时间(TTSR):当浏览器访问某个网页时,从客户端开始发起请求,到客户端浏览器开始看到非空网页对象. 用户越早看到浏览器的内容,心理上的等待时间就越短.

网页性能管理详解

- - 阮一峰的网络日志
这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 我猜想,大多数用户会关闭这个页面,改为访问其他网站. 作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢. 本文将详细介绍性能问题的出现原因,以及解决方法. 要理解网页性能为什么不好,就要了解网页是怎么生成的.

[译]BigPipe:高性能的“流水线技术”网页

- 小和尚 - ISD Webteam
原文地址:http://www.facebook.com/note.php?note_id=389414033919. 译文地址:http://isd.tencent.com/?p=2419. Facebook的网站速度做为最关键的公司任务之一. 在2009年,我们成功地实现了Facebook网站速度提升两倍.

初探 performance – 监控网页与程序性能

- - Web前端 腾讯AlloyTeam Blog | 愿景: 成为地球卓越的Web团队!
使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据. 配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦. 额,先看下兼容性如何: http://caniuse.com/#feat=nav-timing. 这篇文章中 Demo 的运行环境为最新的 Chrome 的控制台,如果你用的是其他浏览器,自查兼容性哈~.

响应式的WEB设计(三)- 桌面及移动设备的网页性能

- - 博客园_首页
移动设备由于受到带宽、处理器运算速度的限制,因而对网页的性能有更高的要求. 究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢. 这些元素应该做何处理以提升页面在移动设备中的整体性能. 是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢. 2、移动设备中网页的性能检测. 3、移动设备网页的性能瓶颈.

给网页设计师和前端开发者看的前端性能优化

- - 优设(UISDC)
本文的作者哈利来自英国,是一位22岁的设计师、开发人员,同时也是一名作家和讲师(见下图). 英文原文: Front-end performance for web designers and front-end developers ,编译: oschina. 在这篇长文章中,我将分享个人项目经验,一些关于快速简单且非常有趣的WEB性能知识的点点滴滴,以便使你的行为可以像一个初级的网页设计师和前端开发者;希望对任何想开始学习性能的人,有一定的启迪作用,并使你的前端项目变得超快.

合并和比较度量

- liang - SEM WATCH
往往我们在做分析的时候需要结合各类基本的指标进行二次计算合并得到一个可以用于进行综合评价或比较的度量,这个过程中就需要涉及到一些指标的合并技巧,和比较基准的设定. 其实之前“数据上下文”的系列文章中也一再强调了我们需要为指标设定合理的参考系来评价指标的趋势或表现的好坏,之前提供了一系列的方法,但这篇文章里面要介绍的方法应该是最简单方便的,同时不失实用性,得益于《用户体验度量》这本书中的介绍,所以这篇文章更像是一篇读书笔记,内容基本整理总结自《用户体验度量》第8章——合并和比较度量,当然不再局限于用户体验层面,结合了网站分析层面的思考.