评估网络性能 - acelan86/chromeDevTools GitHub Wiki

[原文地址] https://developers.google.com/chrome-developer-tools/docs/network?hl=zh-CN

Network面板记录了你的应用的每一个网络操作的相关信息，包括详细的时间线数据，HTTP请求和响应头，cookies，WebSocket数据，等等。Network面板帮助你解答关于你的web应用的网络性能问题，例如：

• 哪个资源最晚加载？
• 哪个资源加载时间最长（持续时间）？
• 谁发起某个特定的网络请求？
• 一个特定资源的各个网络阶段各花费了多少时间？

Network面板使用Resource Timing API，一个为每个已加载资源提供详细网络时间线的JavaScript API。例如，这个API能精确的告诉你一个image的HTTP请求什么时候开始，什么时候接收结束。下面的图例显示了Resource Timing API提供的各个网络时间线上的关键点。

这个API可以使用在任何的web页面中，不只是DevTools。在chrome中，它被暴露在全局的window.performance对象中。performance.getEntries()方法返回一个resource timing objects的数组包含了这个页面上所有的请求资源数据。（译注：chrome目前版本使用window.performance.webkitGetEntries()方法）

试试：在当前页面打开Javascript控制台，输入下面的命令，点击回车：

window.performance.getEntries()[0]
//也许你应该使用window.performance.webkitGetEntries()[0]，译注

它获取resource timing objects数组的第一个元素并将它的所有属性显示在控制台中，就像下面这样：

遵循Hight Resolution Time规范，每个时间戳都是微秒级的。这个API在Chrome中可用，叫做window.performance.now()方法。

当DevTools打开时Network面板自动记录所有的网络活动。当你第一次打开它时是空的。重载页面开始记录，或者等着你的应用发起新的网络活动。

每个请求资源被添加为Network table中的新的一行，包含下表中的列。注意下面关于Network table中的内容：

• 不是素有的列都是默认可见的；你可以很简单的显示或隐藏每一列。
• 有些列包含一个主要字段和次要字段（比如Time和Latency列）。当Network table使用大资源行视图时两个字段都会显示；当使用小资源行视图时只有主字段显示。
• 你可以通过点击列头对每一列的值进行排序。Timeline列有一点点不同：点击它的列头显示一个附加的排序区域菜单。见[Timeline视图]和[排序过滤]章节获取更多信息。

默认的，当你跳转到另外一个页面，或者重载当前页面的时候网络记录日志面板的数据会被清除。为了保持日志，点击Network面板底部黑色的Preserve log upon navigation按钮；新的记录将被添加到network table的后面。再次点击这个按钮（现在已经变成红色）来禁用日志保持。

默认的，Network table中的资源按每一个请求的开始时间排序（网络“瀑布图”）。你可以通过点击另外一列的列头来排序表格。再次点击改变排序顺序（升序或降序）。

Timeline列是唯一和其他列不同的，当点击的时候，它会显示一个额外的排序字段菜单。

菜单包含下面的排序选项：

• Timeline — 通过每一个网络请求的开始时间排序。这是默认的排序方式（和StartTime选项的排序方式一致）
• Start Time — 通过每一个网络请求的开始时间排序。（和Timeline选项的排序方式一致）.
• Response Time — 通过每个请求的响应时间排序.
• End Time — 通过每一个请求的完成时间排序.
• Duration — 通过每一个请求耗费的所有时间排序。
• Latency — 通过请求的开始时间到响应开始的这段时间排序（就是我们所知道的“首字节加载时间”）.

要过滤Network table只显示某种资源类型的记录，点击面板底部任意一种内容类型：Documents，Stylesheets，Images，Scripts，XHR，Fonts，WebSockets和Other。下面的截图只显示CSS资源。要显示所有类型的记录，点击All按钮。

你可以改变Network table默认的显示集合。要显示或隐藏一列，在表头中右键或者Control+click(mac)并且选择或者取消选择列表中的列名即可。

你可以使用大资源行视图（默认）或者小资源行视图来显示Network table。点击面板底部蓝色的Use small resource rows切换按钮显示小资源行。点击同样的按钮（现在是灰色的）来重新显示大资源行视图。大行允许一些列显示两个字段：一个主要字段和一个次要字段（Time和Latency）。当是小资源行视图时只显示主要字段。

在下面的截图中，Network table显示小资源行视图并且只有Timeline列

Network面板中的Timeline视图展示了每一个资源加载时间的图表，从HTTP请求开始到响应接收完毕。每一个资源的加载时间被展现成一个条，并根据资源类型不同进行颜色区分。每个条颜色较浅的部分的长度是请求的延迟时间，而颜色较深的部分的长度是接收响应数据所花费的时间。

当把鼠标放在timeline行上时（但不是在一个实际的颜色条上），请求的延时和接收时间都显示在这个颜色条相应的浅色或者深色区域上。

如果把鼠标放在颜色条上，将会弹出一个提示条，上面显示了资源完整的时间线数据。这个信息和Timing details面板的信息一致。

时间线使用蓝色和红色垂直线标示了DOMContentLoaded和load事件触发的时刻。当主文档被加载并且解析完后DOMContentLoaded事件被触发。当所有当前页面的资源（译注，不包括iframe等其他新文档的资源）被下载完成后load事件被触发。

Timeline条像下面一样分色：

在Network table中右键或者Control+clicking（mac），弹出一个包含一些行为的上下文菜单。这些行为中的某些作用于鼠标点击所在的资源行（像Copy Request Headers），而另外一些作用于整个网络记录（像将网络记录存为HAR文件）。

下面的菜单行为作用于选中的资源：

• Open Link in New Tab — 在一个新的标签中打开资源。你也可以在Network table中双击资源名。
• Copy Link Address — 将资源URL拷贝到系统剪贴板
• Copy Request Headers — 将HTTP请求头拷贝到系统剪切板。
• Copy Response Headers — 将HTTP相应头拷贝到系统剪切板。
• Copy as cURL — 将网络请求作为一个cURL命令拷贝到系统剪贴板。
• Replay XHR — 如果指定的请求是一个XMLHTTPRequest，重新发送这个原始XHR。

cURL是一种命令行工具，用于构造HTTP事务。Network面板的Copy as cURL命令重建一个HTTP请求（包括HTTP头，SSL证书和请求参数串）并且作为一个cURL命令字符串拷贝到剪贴板中。然后你可以黏贴字符串到终端窗口中执行相同的请求

下面是一个从Google的新首页上取下来的一个XHR请求的cURL命令行字符串：

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

你也可以将网络记录保存为HAR（HTTP Archive）文件，或者以HAR数据结构的样式拷贝记录到剪贴板。HAR文件包含一个描述网络“瀑布流”的JSON数据结构。一些第三方工具可以通过HAR文件中的数据重新构造网络瀑布流。

要保存一份记录：

1. 在Network table中右键或者Control+click。

2. 在出现的上下文菜单中，选择下面的某一个行为：

   *　Copy All as HAR - 以HAR格式拷贝网络记录到系统剪贴板。

   • Save as HAR with Content - 将页的每个资源的网络数据保存为HAR文件。二进制资源，包括图片，使用Base64编码。

更多信息见：Web Performance Power Tool: HTTP Archive (HAR).

当你在Network table中点击一个资源名时，一个标签窗口会出现，它包含了下面的额外细节：

• HTTP请求和响应头
• 资源预览
• HTTP响应
• Cookie名和值
• WebSocket信息
• 资源网络时间

Header标签显示了资源的请求URL，HTTP方法和响应状态码。另外，它列出了HTTP响应和请求头和他们的值，还有请求参数字符串。你可以通过点击parse/view source按钮来切换查看HTTP头的解析格式化结果，或者源内容。你也可以通过点击View decoded/View URL encode按钮来为每一个请求参数块切换decode或者URL encode视图。

你也可以拷贝请求或者响应头到剪贴板中。

Preview标签显示了一个资源的预览，如果允许预览的话。目前为image和JSON资源提供预览：

你可以在Response标签中查看资源的未格式化的响应。

Response标签包含了资源的未格式化内容。下面是一个请求返回的响应的JSON数据格式的截图

你也可以查看某些资源类型的格式化的预览，包括JSON数据格式和图片。

Cookie标签显示了所有在资源的HTTP请求和响应头中携带的cookie的表格。你也可以清除所有的cookie。

Cookie表格包含了下面的列：

Frames标签显示了通过WebSocket连接发送或者接收的信息。这个标签只在当前选中的资源是通过WebSocket连接初始化时候可见。这个表格包含了下面的列：

消息根据他们的类型分色。发送的文本消息标记成浅绿色；接收的文本消息为白色：

WebSocket操作码是浅黄色的：

错误是浅红色的：

注意当前的方案：

• 要在一个新消息到达之后刷新Frames table，需要点击左侧的资源名。
• 只有最新的100个WebSocket消息会被保持在Frames table中。

Timing标签以图形化展现了资源加载的不同的网络阶段消耗的时间。

下面的表格列出了在Timing标签页中的各个网络阶段和他们的描述。

To learn more optimizing the network performance of your application, see the following resources:

• Use PageSpeed Insights to identify performance best practices that can be applied to your site, and PageSpeed optimization tools to automate the process of applying those best practices.
• High Performance Networking in Google Chrome discusses Chrome network internals and how you can take advantage of them to make your site faster.
• How gzip compression works provides a high level overview gzip compression and why it's a good idea.
• Web Performance Best Practices provides additional tips for optimizing the network performance of your web page or application.