评估网络性能

发布于 2016-05-29 09:16:54 | 187 次阅读 | 评论: 0 | 来源: 网络整理

关于您的每个应用程序的网络运营，包括详细的时序数据，HTTP请求和响应头，cookies，WebSocket的数据，以及更多的网络小组记录的信息。网络面板可帮助你解答您的Web应用程序的网络性能问题，如：

• 其中资源最慢时间第一个字节？
• 哪些资源加载（持续时间）的时间最长？
• 是谁发起的特定网络请求？
• 多少时间花费在各种网络阶段的特定资源？

关于资源定时 API

网络面板使用资源计时 API，一个 JavaScript API，提供详细的网络定时数据为每个加载的资源。例如，该 API 可以告诉你准确的图像 HTTP 请求启动时，被接收的图像的最后一个字节时。下图显示了资源定时 API 提供了网络定时的数据点。

该 API 可用于任何网页，而不仅仅是 DevTools。在 Chrome 浏览器，它暴露了全球window.performance对象的方法。该performance.getEntries（）方法返回“资源定时对象”，一个页面上的每个请求的资源的数组。

试试这个：打开 JavaScript 控制台当前页面，输入以下的提示，并回车：

window.performance.getEntries()[0]

试试这个：打开 JavaScript 控制台当前页面，输入以下的提示，并回车：

每个时间戳是微秒，即ResolutionTime规范。此 API 可 inChrome 作为window.performance.now（）方法。

网络面板概述

网络面板会自动记录所有的网络活动，而 DevTools 是开放的。当你第一次打开面板时可能为空。刷新页面开始记录，或者干脆等待网络活动发生在你的应用程序中。

每个请求的资源被添加作为行到网络表，其中包含下面列出的列。请注意以下有关网络表：

• 未在下面列出的所有列在默认情况下可见;您可以轻松地显示或隐藏列。
• 某些列包含主字段和次级领域（例如：时间和等待时间）。当观看网络表的大资源行这两个领域都显示;使用小的资源行时只有主域显示。
• 你可以通过单击列标题由列的值排序表。在时间轴中列的行为有所不同：单击其列标题显示的其他排序字段的菜单。见瀑布景色，排序和过滤的更多信息。

在保存导航网络日志

默认情况下，当前的网络日志记录时，会导航到另一个页面，或者刷新当前页面丢弃。要保留日志记录在这些情况下，单击黑色 保留日志在导航键不要在导航在网络面板底部保存日志;新记录被追加到表的底部。再次单击该按钮（红色 保留在导航资源）来禁用日志保存。

排序和过滤

默认情况下，在网络表的资源是由每个请求（在网络“瀑布”）的开始时间进行排序。您可以通过单击列标题排序表由另一列值。再次单击该标题更改排序顺序（升序或降序）。

时间轴列是别人的独特之处，点击后，会显示额外的排序字段的菜单。

该菜单包含以下排序选项：

• 时间轴 - 排序由每个网络请求的开始时间。这是默认的排序，并且是相同的开始时间选项排序）。
• 开始时间 - 由每个网络请求的开始时间排序（同样如由时间轴选项排序）。
• 响应时间 - 通过排序每个请求的响应时间。
• 结束时间 - 通过排序时，每个请求完成的时间。
• 持续时间 - 排序由每个请求的总时间。
• 延迟 - 排序由请求的开始和响应的开始之间的时间（也被称为“时间到第一个字节”）。

要过滤的网络表，只显示某些类型的资源，单击内容类型之一沿着面板的底部：文档，样式表，图片，脚本，XHR，字体的 WebSockets 和其他。在下面的截图只CSS资源显示。要查看所有内容类型，单击全部过滤器按钮。

高级过滤

除了资源类型过滤，可以过滤查询缩小资源。在过滤器输入字段200：例如，要查找其中有 200 状态码的所有资源，你可以输入查询的StatusCode。

请注意以下行为：过滤器查询包含一个类型（的StatusCode）和价值（200）。过滤器查询是不区分大小写，所以你可以键入大写或小写。该过滤器类型为您提供了自动完成建议。使用箭头键来形成一个选择，然后按Tab键选择它。该过滤器值具有自动完成这表明你重视存在于当前的网络记录。快速预览您的查询的结果，使用Up/Down箭头键循环通过自动完成建议。结果立即出现，即使你不按Enter键或选项卡来完成选择。否定过滤器的查询，在前面加上一个破折号查询（ - ），例如-StatusCode：200。

可用过滤器类型：

使用上面列表中显示的查询，构建它的格式为：<过滤器类型>：<说明>。你几乎总是要使用自动完成建议可确保您的查询有效。

添加和删除表中的列

您可以通过改变网络表显示的列的默认设置。要显示或隐藏列，右键+单击或控制+单击（仅限Mac）在表头，然后选择或从列表中取消选择列名。

改变资源行大小

你可以用较大的资源行（默认），或小的资源行查看网络表。点击蓝色的 用小资源行切换按钮，小行的资源在面板底部，查看小行。点击该按钮（现灰色的 大资源行）再次查看大资源行。大型行启用一些列，以显示两个文本字段：一次场和二次场（时间和等待时间，例如）。当观看小行只有主域显示。

瀑布视图

在网络面板瀑布查看图形花加载每个resource.From HTTP请求到接收到响应的最后一个字节的开始的时间。

每个资源加载时间被表示为一栏。这具有与每个资源颜色编码的信息。每种颜色指定收到资源需要不同的步骤。Bar增长较大的代表正在为trasmitted请求更多的数据。

该网络的时间表一个简单的网页。

将鼠标悬停在该栏本身会呈现完整的时序数据。这就是会呈现在时序的详细信息选项卡给定资源的相同信息。

网络定时信息披露上徘徊

你可以使在网络设置，以查看时间表作为颜色编码的由资源类型。如果你做网络定时信息仍然是通过提示访问。瀑布杆被颜色编码，如下所示：

保存和复制网络信息

右键单击或Ctrl+单击（仅限Mac）上下文菜单出现的几个动作网络表内。鼠标点击其中的一些动作适用于资源区（如复制HTTP请求头），而另一些适用于整个网络的记录（如保存网络记录作为一个HAR文件）。

下面的菜单操作应用到选定的资源：

• 打开链接在新标签页 - 在打开新标签页中的资源。您也可以双击网络表中的资源名称。
• 复制链接地址 - 复制资源URL到系统剪贴板。
• 复制请求头 - 复制HTTP请求头到系统剪贴板。
• 复制响应头 - 复制HTTP响应头到系统剪贴板。
• 复制为卷曲 - 复制网络请求作为一个cURL命令字符串到系统剪贴板。请参阅复制请求作为卷曲的命令。
• 重播XHR - 如果相关请求是一个XMLHttpRequest，重新发送原始XHR。

复制请求作为卷曲的命令

cURL是一个命令行工具，用于对HTTP事务。网络面板的复制为卷曲命令创建一个HTTP请求（包括HTTP头，SSL证书和查询字符串参数），并将其副本卷曲命令字符串复制到剪贴板。然后，您可以粘贴串入一个终端窗口（与卷曲的系统上）执行相同的请求。

下面是来自谷歌新闻主页上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. 右键+单击或控制+单击网络表。
2. 在出现的快捷菜单中，选择下列操作之一：
   • 所有的复制为HAR - 复制网络记录在HAR格式的系统剪贴板。
   • 另存为HAR与内容 - 保存所有网络数据到HAR文件以及每个页面资源。二进制资源，包括图像，编码为Base64编码的文本。

欲了解更多信息，Web性能电动工具：HTTP存档（HAR）。

网络资源的详细信息

当您单击网络表的资源名称出现一个选项卡式窗口，其中包含以下其他详细信息：

• HTTP请求和响应头
• 资源预览
• HTTP响应
• Cookie的名称和值
• WebSocket的消息
• 资源网络定时

HTTP头

标题标签显示资源的请求的URL，HTTP方法和响应状态代码。此外，它列出了HTTP响应和请求头和它们的值，以及任何查询字符串参数。您可以查看HTTP标头解析和格式化，或者点击查看解析/查看源代码切换按钮，分别毗邻每个标题的一节他们的源代码形式。您还可以查看自己的解码或URL编码形式的参数值，点击查看解码/查看URL编码切换按钮旁边的每个查询字符串部分。

您也可以请求和响应头复制到剪贴板。

资源预览

预览选项卡显示资源，当可用的预览。预览当前显示图像和JSON资源，如下所示。

您可以查看该资源的上Responsetab格式化响应。

HTTP响应

响应选项卡包含资源的未格式化的内容。下面是被返回作为用于请求的响应，一个JSON数据结构的屏幕截图。

您还可以查看一些资源类型格式预览，包括JSON数据结构和图像。

Cookies

Cookies标签显示所有在theresource的HTTP请求和响应头发送的cookie的表。您也可以清除所有的cookies。

Cookie表包含以下几列：

WebSocket 的框架

帧标签显示发送或接收通过 WebSocket 连接的消息。此选项卡才可见当选定的资源发起的WebSocket连接。该表包含以下几列：

消息是彩色编码根据其类型。即将离任的文本信息颜色编码浅绿色;收到的短信均为白色：

WebSocket的操作码是浅黄色：

错误是浅红色。

关于当前实施的注意事项：

• 要刷新的帧数表中的新邮件到达后，点击左侧的资源名称。
• 只有最后100的WebSocket消息由帧表保留。

资源网络定时

定时图表选项卡上度过涉及加载资源的各种网络阶段的时间。这显示了相同的数据，当您在在瀑布查看资源吧悬停。