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

标签: 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):当浏览器访问某个网页时,从客户端开始发起请求,到客户端浏览器开始看到非空网页对象. 用户越早看到浏览器的内容,心理上的等待时间就越短.

Android 网页加载完成ProgressDialog运用

- - CSDN博客推荐文章
      "正在进入网页,请稍后.   // 设置视图客户端. 作者:gongzibai 发表于2012-7-23 0:31:58 原文链接. 阅读:13 评论:0 查看评论.

使用谷歌统计来跟踪网页加载时间

- 车东 - 标点符
Google Analytics可以用来记录网站的加载时间或网页内各个模块的加载时间,其实整个原理非常的简单,只是记录页面呢不同位置javascript的执行时间,两者相减即加载时间. 比如我想知道用户加载页面中head部分JS和CSS的时间和加载页面中主体内容body的时间. 1、在页面head中CSS和JS文件加载前添加如下代码:.

Chrome 17将大幅提升网页加载速度

- 韬光养晦 - cnBeta.COM
据国外媒体报道,Chrome 17已经作为Chromium nightly版通过Webkit渠道发布,这是Google今年发布的第九个修订版浏览器. 新版Chrome首次整合HTTP管线化(HTTP pipelining)技术. 用户可以通过chrome://flags进入设置界面,点击HTPP Pipelining选择框激活这项功能.

《让网页加载快一些》培训演示文档

- - BlogJava-首页技术区
《让网页加载快一些》,这篇PPT演示文档,目的在于扩大视野用(没有涉及到深度),便于在处理网页性能优化时,为一些同事提供一些处理思路,避免到处撞墙. 如何让一个页面加载快一些,这是主题. 页面每经过一个环节,都会简单涉及. 覆盖面广(前前后后都有),但蜻蜓点水. 可能会增加些视野(目的也就达到了).

网页加载速度 最多不能超过3秒!

- - 雷锋网
【编者按】本文由Cucumbertown联合创始人Cherian Thomas撰写,阐述了其对网页加载的看法. 在Cucumbertown我们运用各种方法来确保我们的页面加载时间保持在2秒内,最多不能超过3秒,我们真的非常看重这个. 如果响应超过3秒的话我们就会收到不少的警报. 几天之前,那时候Chris Zacharia还没写那篇说明页面权重重要性及 YouTube应对之策的文章.

android WebView, WebChromeClient和WebViewClient加载网页基本用法

- - CSDN博客推荐文章
WebView, WebChromeClient和WebViewClient加载网页基本用法.  webview是android中的浏览器控件,在一些手机应用中常会用到b/s模式去开发应用,这时webview的强大功能就会显示出来.  1、webview的几点设置.  权限设置:.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误.

让网页加载快1秒的深远影响

- - TECH2IPO/创见
全球内容交付网络(CDN)服务领头羊 Akamai 近日公布的《互联网状况》指出,2015 年第 4 季度全球平均网速为 5.6Mbps,同比增长 23% 环比增长 8.6%. 宽带发展联盟发布的第 11 期《中国宽带速率状况报告》显示,2016 年第 1 季度我国固定宽带网络下载速率达到 9.46 Mbit/s,环比提升 13.4%,而且工信部表示将继续提速年底之前希望平均接入速度达到 30M.

Google 测试可一直在同一页加载搜索结果的网页

- xing - cnBeta.COM
Google之前测试过一直保持在顶部的搜索框,现在他们又在搜索界面页面的下部做其了小动作. 如上图,你看不到经典的Goooooooooogle链接来跳转到后面的搜索结果页面了,取而代之的是Show more results的按钮,点击即可再在当前页面已经显示的10个搜索结果下方继续显示出10个新的搜索结果.

谷歌计划将移动网络网页加载速度提高一倍

- - cnBeta.COM
感谢 dou的投递. 4月19日消息,据国外媒体报道,作为谷歌的技术总监,艾维那·简恩(Arvind Jain)一直在通过全球的旅馆、办公室、机场休息区等各种途径监控网络接入速度,寻求途径来加快接入网络的速度. 简恩的任务是使移动网络的网页加载速度比目前提高一倍. 目前,美国移动网络的网页加载速度平均为9.2秒.