专注于
IT技术和业内交流

Chrome DevTools — 页面加载性能

Network面板测量网站的网络性能

the chrome devtools network panel

Network面板记录网页上的每个网络动作, 包括详细的时间数据,HTTP请求和响应头,cookies等等。

Network面板概览

Network 面板由5个小版块组成:

  1. Controls. 这些选项控制Network的外观和功能
  2. Filters. 这些选项控制哪些资源会在请求列表里显示. Tip: 按住cmd键可以同时选择多个过滤器。
  3. Overview. 这里显示资源下载的timeline,多个资源同时下载时,会同时显示在这里。
  4. 请求列表. 这个表里列出所有下载过的资源,按下载先后排序,最先下载的在最上面。点击资源名字可以看到更详细的信息。
    提示: 右击除Timeline外的表可以增加和删除显示的列
  5. Summary. 这里显示总的请求数,传输的数据量,传输时间。

network panel panes

请求列表 默认显示以下列。你可以增加和删除列

  • Name. 资源名称.
  • Status. HTTP状态码.
  • Type. 资源的MIME类型.
  • Initiator. 请求的构造器. 它可能有以下几种值:
    • Parser. Chrome的HTML解析器构造的请求.
    • Redirect. HTTP重定向.
    • Script. 脚本.
    • Other. 其它过程或动作, 比如用户点击链接或者在地址栏输入URL.
  • Size. 请求回复的数据大小.
  • Time. 请求消耗的时间.
  • Timeline. 瀑布式的显示请求时间. 点击这列的头可以选择其它的排序方式。

记录网络活动

打开Network面板,刷新网页,默认会记录所有的网络活动

你可以通过record按钮控制是否记录网络活动. 红色 (record button on), 表示在记录.
灰色(record button off), 表示没有记录.
点击它或按cmd+e键可以开始和结束记录.

在录制过程中截屏

Network在网页加载时可以截屏. 这就是传说中的Filmstrip.

点击camera开启或关闭Filmstrip功能. 当它是灰色时表示关闭Filmstrip功能(filmstrip 
disabled).
蓝色时表示开启Filmstrip功能(filmstrip enabled) .

刷新网页,屏幕截图就会显示在Overview上面.

recording with filmstrip

把鼠标移动到屏幕截图上面时,Timeline会显示一条垂直的黄色线,表示这是在黄色线所指示的时间截的屏

filmstrip overlay on timeline

双击屏幕截图可以放大它,然后可以用屏幕的左右键跳转到上一张或下一张.

zoomed filmstrip screenshot

查看DOMContentLoaded和load事件信息

Network会高亮两种事件:
DOMContentLoaded and
load.

当网页最初的标记被解析完时会产生DOMContentLoaded事件. 在Network面板里有两个地方显示它:

  1. Overview窗口里的蓝色竖线.
  2. Summary窗口里有详细的时间.

DOMContentLoaded event on network panel

当网页被完全加载完后会产生load事件. 有三个地方会显示:

  1. Overview窗口里的红色字.
  2. Requests Table里的垂直竖线.
  3. Summary窗口里有详细的时间.

load event on network panel

##查看单个资源下载的详细信息

点击 Requests Table里的资源名称,你就可以看到关于下载这个资源的详细信息,不同类型的资源,信息不同,但都有下面这些:

  • Headers. HTTP头.
  • Preview. JSON,图片和文档预览.
  • Response. HTTP响应数据.
  • Timing. 请求过程的详细时间数据.

viewing details for a single resource

查看网络时间数据

点击Timing会显示请求过程中的以下几个阶段的时间数据:

  • Queuing
  • Stalled
  • Request/Response
  • Request sent
  • Waiting (Time to first byte (TTFB))
  • Content Download

timing tab

把鼠标移动Timeline里的图片上也可看到以上信息.

timing data for one resource in timeline

相关指南: 了解资源加载时序

查看HTTP头

点击Headers可以查看到详细的头信息,包括请求的URL,HTTP方法,响应状态码,各种头和查询字符串等等.

HTTP headers for a single resource

点击view source 或者view parsed可以查看响应头,请求头,查询字符串源格式或者解析后的格式

view header source

点击view URL encodedview decoded 可以查看查询字符串的URL encoded或decodede格式.

view URL encoded

预览资源

点击Preview可以查看某些资源的预览.

image resource preview

查看HTTP响应内容

点击Response可以查看某些资源的未格式化HTTP响应.

JSON resource response data

查看cookies

如果请求或响应中有cookie,点击Cookies即可查看到以下信息:

  • Name. cookie的名字.
  • Value. cookie的值.
  • Domain. cookie所属域.
  • Path. cookie的来源路径.
  • Expires / Max-Age. cookie的有效时间.
  • Size. cookie大小.
  • HTTP. 是否能被javascript访问.
  • Secure. 是否通过HTTPS协议传输.

resource cookies

查看WebSocket帧

点击Frames查看
WebSocket
连接信息. 这个窗口只会在连接是WebSocket时才会有.

websocket frames tab

Frames包含以下信息:

  • Data. websocket消息. 如果是文本消息, 它将直接被显示出来.如果websocket协议消息,它将显示消息的名称和代码,具体有以下几种:
    • Continuation Frame
    • Binary Frame
    • Connection Close Frame
    • Ping Frame
    • Pong Frame
  • Length. 消息大小.
  • Time. 消息创建时间.

不同类型的消息有不同的颜色:

  • 发出的文本消息是浅绿色的.
  • 收到的文本消息是白色的.
  • WebSocket协议消息是浅绿色的.
  • 错误是浅红色的.

注意:

  • 点击资源名称可以刷新Frames
  • Frames只保留最近100条WebSocket消息.

查看资源发起者和依赖

按住Shift并移动鼠标到资源上可查看它的initiators和dependencies.

将鼠标下的这个资源我们称为目标,目标上面第一个绿色的资源就是目标的发起者,如果上面还有第二个绿色的资源,它就是这个发起者的发起者,依次类推。
目标下面的红色资源就是目标的依赖

在下图中, 目标是dn/. 目标的发起者是脚本rs=AA2Y. 发起者(rs=AA2Y)的发起者是google.com.最后dn.js目标(dn/)的依赖.

viewing resource initiators and 
dependencies

注意当资源很多时,有可能看不到全部的发起者和依赖.

给请求排序

Requests Table里的请求默认是按开始时间排序的,最早开始的在最上面.

点击表中的列名,请求就会按该列排序,再次点击改变排序顺序

Timeline和其它列不同. 点击后它会显示一个菜单:

  • Timeline. 按请求开始时间排序,这是默认选项,和Start Time选项效果一样.
  • Start Time. 按请求开始时间排序.
  • Response Time. 按响应时间排序.
  • End Time. 按请求结束时间排序.
  • Duration. 按请求耗时排序,用这个选项可以看出哪个请求耗时最多.
  • Latency. 按请求开始与响应开始之间的延迟时间排序,用这个选项可以看出哪个延迟(TTFB-time to first byte)最长.

Timeline sort fields

过滤请求

Network面板提供了很多种方法过滤。点击filters按钮(filters button)显示或隐藏Filters窗口。

点击类型按钮可以显示或隐藏对应类型的请求。

{% include shared/note.liquid list=page.notes.filters %}

multiple content type filters selected simultaneously

filter输入框里输入一个字符串后,Network 面板就只显示资源名字和其匹配的请求.

resource name filtering

filter输入框很强大,支持很多关键字可用于对滤后的结果排序,比如用larger-than可以按文件大小排序。

以下是filter输入框支持的所有关键字:

  • domain. 只显示指定域名的请求. 可以用通配符指定多个域名. 比如, *.com
    只显示以.com结尾的请求. 当你输入domain后,DevTools会自动列出遇到的所有域名.
  • has-response-header. 显示包含指定HTTP响应头的请求. DevTools会自动列出遇到的所有头.
  • is. 用is:running过虑出WebSocket资源.
  • larger-than. 显示资源大小大于指定大小的请求,单位是byte。1000等于1k.
  • method. 显示指定HTTP方法的请求. DevTools会自动列出遇到的所有方法.
  • mime-type. 显示指定类型的请求. DevTools会自动列出遇到的所有类型.
  • mixed-content. 显示所有的混合类型资源(mixed-content:all)或者显示当前显示的混合类型资源(mixed-content:displayed).
  • scheme. 显示指定协议的请求,HTTP(scheme:http)或HTTPS (scheme:https).
  • set-cookie-domain. 显示有Set-Cookie头,并且cookie指定的Domain属性匹配指定值的请求。DevTools会自动列出遇到的所有cookie域。
  • set-cookie-name. 显示有Set-Cookie头,并且cookie指定的name属性匹配指定值的请求,DevTools会自动列出遇到的所有cookie名字
  • set-cookie-value. 显示有Set-Cookie头,并且cookie指定的value属性匹配指定值的请求,DevTools会自动列出遇到的所有cookie值
  • status-code. 显示指定响应状态码的请求. DevTools会自动列出遇到的所有状态码.

filtering by file size

在关键字后输入一个冒号就可以弹出自动完成的下拉菜单,比如,下图中输入domain:后就弹出了一个下拉菜单.

filter text field autocomplete

复制,保存和清除网络信息

右击Requests Table可以复制,保存,删除网络信息,在资源上右击后会出现以下选项(不会类型的资源,选项不同):

  • Copy Response. 拷贝HTTP响应到系统剪贴板.
  • Copy as cURL. 拷贝请求对应的cURL命令字符串到系统剪贴板.
    参考拷贝curl命令.
  • Copy All as HAR. 拷贝所有的请求对应的HAR数据到系统剪贴板.
    HAR文件包含描述网络请求信息的JSON格式数据,很多第三方工具
    tools可以查看HAR文件. 参考
    Web Performance Power Tool: HTTP Archive
    (HAR)
    .
  • Save as HAR with Content. 拷贝所有的请求对应的HAR数据到文件. 像图片之类的二进制资源被保存成Base64-编码的文本.
  • Clear Browser Cache. 清除浏览器缓存.

    提示: 你可以通过Network Conditions开启或关闭浏览器缓存.

  • Clear Browser Cookies. 清除浏览器cookie.
  • Open in Sources Panel. 在Sources面板打开选择的资源.
  • Open Link in New Tab. 在一个新的浏览器tab打开这个资源. 双击资源名也可达到同样的效果.
  • Copy Link Address. 拷贝资源URL到系缚剪贴板.
  • Save. 保存选择的文本资源. 只有当资源是文本类型时才会显示。
  • Replay XHR. 重新发送XMLHTTPRequest. 只有当资源是XHR才显示.

copy and save context menu

Copy requests as cURL commands

cURL发送HTTP请求的命令行工具. 在Requests Table右击资源,选择Copy as cURL,
DevTools会构造一个发送这个HTTP请求的curl命令字符串,并把它复制到剪贴板,然后你就可以粘贴到控制台执行这个命令。

下面是从Google News复制的一个XHR请求。

curl 'http://news.google.com/news/xhrd=us' -H 'Accept-Encoding: gzip,deflate,:sdch' -H 'Host: news.google.com' -H 'Accept-Language: en-US,en;q=0.8' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1510.0 Safari/537.36' -H 'Accept: */*' -H 'Referer: http://news.google.com/nwshp?hl=en&tab=wn' -H 'Cookie: NID=67=eruHSUtoIQA-HldQn7U7G5meGuvZOcY32ixQktdgU1qSz7StUDIjC_Knit2xEcWRa-e8CuvmADminmn6h2_IRpk9rWgWMdRj4np3-DM_ssgfeshItriiKsiEXJVfra4n; PREF=ID=a38f960566524d92:U=af866b8c07132db6:FF=0:TM=1369068317:LM=1369068321:S=vVkfXySFmOcAom1K' -H 'Connection: keep-alive' --compressed 

自定义Network面板

Requests Table默认显示小行。点击Use large resource rows 按钮 (large resource rows button)可以增加每行大小.

大行将显示更多信息。

large resource rows

增加和删除列

右击Requests Table中的任意头可以增加和删除列。

Add or remove columns

网页跳转时保留网络日志

当网页跳转或刷新时,默认是会清除网络日志的。选中Preserve log将不会清除之前的网络日志。新的请求放在Requests Table底部。

其它资源

参考下面这些资源可以学习更多优化网络性能的技巧:

本文由向波翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools — 页面加载性能

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们