Web性能度量工具:Chrome DevTool

February 24, 2017

Tags:web性能

背景

我们开发和访问线上站点,有时会遇到WEB页面加载缓慢的现象,需要具体分析问题所在,Google Chrome浏览器的DevTool工具为我们对站点的诊断提供了便利。

度量指标

见下图的timeline,可以清晰的呈现访问我blog的HTTP请求的时间开销:


为了方便我们分析问题这里有必要说明Queueing、Stalled等属性指标的含义:
Queueing
此属性意为请求在等待队列中耗时,浏览器设定等待队列是因为:

  • 某些请求被渲染引擎设定为低优先级例如图片资源,待优先级较高资源,如CSS、JS脚本被加载后才被允许出队列进行下一步的处理
  • Request请求因TCP Socket资源吃紧,被迫放到队列中等待浏览器有空闲TCP Socket再做处理
  • 查找浏览器本地缓存,如果由于缓存所在磁盘IO原因很慢,那么就……
  • HTTP1.0/1.1版本,针对每个域默认有6个最大并发连接的限制,超出后会被Queueing

Stalled/Blocking
发送请求前耗时
Proxy Negotiation
与Proxy服务器连接的协商时间开销
DNS Lookup
页面上域名第一次(在本地DNS缓存里命中解析记录就不算了)进行DNS查询时请求/响应总时间开销
Initial Connection/Connecting
建立连接的时间开销包括TCP握手和重试、SSL协商时间
SSL
SSL握手时间
Request Sent/Sending
Request请求发送时间开销
Waiting (TTFB)
请求发出后等待目标响应的时间。计时从浏览器Request请求发起到目标响应后的首字节到达浏览器程序的时间。
Content Download/Downloading
接收Response响应消息的开销

一般耗时实例

以搜索站Baidu与门户站QQ为例,观察从杭州电信百兆办公网络到目标站点平均耗时(不计本地网络原因导致的TCP重传、限速等因素)

指标 平均耗时 问题范围
Queueing 站内HTML页面<10ms,静态资源<500ms 客户端
Stalled/Blocking 不大于Queueing耗时 客户端
Proxy Negotiation <几ms 代理服务器
DNS Lookup <十几ms DNS服务器
Initial Connection/Connecting <十几ms 客户端网络到站点数据中心网络
SSL <十几ms 机器配置、目标站点证书相关配置
Request Sent/Sending <0.2ms 客户端
Waiting (TTFB) 几百ms 双方网络或目标站点响应慢
Content Download/Downloading 很小或很大 双方网络或目标站点限速

· EOF ·