Chrome development tools学习笔记(4)

利用NetWork工具来评估网页性能

NetWork工具记录了Web页面上的每一次网络操作，包括详细的请求时间数据、HTTP的请求和响应、以及WebSocket传输的数据等等。有时候我们会发现我们自己的网页加载比较慢，而其他访问网站速度正常。这时候就可以考虑通过NewWork工具来找出性能瓶颈进行优化。

 关于Resource Timing API

NewWork工具使用了Resource Timing API，Resource Timing API允许我们获取一个文档中与某个资源相关的所有时间信息。Resource Timing API通过window对象的performance属性暴露出来。我们可以使用其中的getEntriesByType()方法来获取页面中每一个资源的时间信息。getEntriesByType()方法会返回一系列PerformanceResourceTiming对象，每一个PerformanceResourceTiming都是当前页面的一个资源请求。

例如，当我们在DevTools的Console中输入以下命令：

window.performance.getEntries()[0]

这句代码为我们显示了当前页面上的第一个资源加载的时间数据。

这里的时间单位是毫秒，在Chrome中通过window.performance.now() 方法可以实现这么高的精度。下面的这张图为以上的这些的属性提供了一个形象的图形表示。但是如果获取的资源是来自不同的域，以上的这些属性并不是都可以使用：

 

如果一个资源是从第三方获取的，那么必须提供一个额外的HTTP头部属性(Timing-Allow-Origin: *)，只有这样我们才能够使用上面提到的所有的网络时间信息。如果没有提供这个属性，我们唯一可以获取的数据是请求的持续时间。

还要补充下的是，Resource Timing API不只可以在DevTools中使用，Chrome 25+，IE 10+，Opera 15+桌面浏览器都已经支持了这个API。在移动端，最新版本的安卓浏览器已经支持了这个API。可以通过以下代码来检测是否支持Resource Timing API。

if ( !('performance' in window) ||
     !('getEntriesByType' 
       in window.performance) ||
     !(window.performance.getEntriesByType('resource') 
       instanceof Array)
  ) {
  // API not supported
} else {
   // API supported
}

NetWork面板使用概述

当使用DevTools的时候，所有的网络活动都会在NetWork面板中被记录下来。当刚打开DevTools的时候，NetWork面板里面可能是空的，刷新页面或者等待页面发起HTTP请求。就可以看到NetWork面板中记录下了当前发生的网络活动。

 

NetWork面板中的每一条记录代表了一次网络请求，其中每一列的含义如下：

• Name and Path，分别显示了资源的的名称和URL路径。
• Method，HTTP请求的方法，例如我们常提到的GET和POST。
• Status and Text，HTTP的状态码和文字信息。常见的有200 OK、404 Not Found等等。
• Domain，资源请求的域名。
• Type，被请求的资源的MIME类型。
• Initiator，发起请求的对象或者过程，它的值有下列几种：Parser表示Chrome的HTML解析器，Redirect表示HTTP重定向，Script表示脚本，Other其他例如超链接或者在地址栏输入地址。
• Size and Content，Size指的是请求资源传输时的大小，Content指的是资源实际的大小。很多网站为了加快载入速度，服务器会对资源进行压缩处理（如GZip），而客户端会进行解压缩处理，所以Size和Content的大小一般不一样。关于他们的区别，在Stack OverFlow上面有人给出了详细的解释Chrome Dev Tools - “Size” vs “Content”。如果是从缓存读取的数据，会显示「(from cache)」
• Time and Latency，Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间。
• Timeline，显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。

当在NetWork中看到显示为红色的记录的时候，表示当前请求发生了错误，记得以前做一个页面UI变化的功能，发现新的UI在有的电脑上载入非常缓慢，通过NetWork工具的查看，发现是某个js调用了Google的统计功能，而由于Google在大陆无法访问的缘故，导致了连接被阻塞引起页面载入缓慢。

在浏览的时候保持NetWork记录

在默认情况下，当你访问新的页面或者重新载入当前页面的时候，NetWork下面记录的网络请求会被清空。勾选了Preserve log之后，NetWork的记录会保持住不会随着新的页面访问或者刷新而被清空。（Chrome官方文档说的通过点击来保持NewWork记录在我用的Chrome浏览器中是无效的，这个按钮只起到了开启和停止Network记录的作用，当开启NetWork记录时，原来显示在NetWork工具中的记录会被清空）

排序和筛选

默认的情况下，NetWork工具中显示的记录是按照发起请求的时间来排序的。可以点击每一列的头部来切换排序字段，以及升降序。

Timeline这一列有点特殊，点击的时候，会弹出一个额外的排序菜单。

 

Timeline的排序菜单中每一项含义如下：

• Timeline，按照每次请求的开始时间排序。NetWork中默认的排序就是这个，它和下面的Start Time其实是一样的。
• Start Time，和Timeline是一样的效果。
• Response Time，按照请求的响应时间排序。
• End Time，按照每个请求完成的先后排序。
• Duration，按照每个请求的持续时间排序。
• Latency，按照请求开始到接收到第一个字节的时间排序。

点击NetWork工具中的内容类型，可以对请求的类型进行筛选，例如当选中Stylesheets的时候，将只会显示所有的样式请求。

高级筛选

除了对资源类型进行筛选外，还可以进一步的缩小筛选范围。例如要查看所有HTTP状态为200的请求，可以通过在筛选框中输入StatusCode:200来实现。

 

在使用Elements工具的时候，我就已经感受到了DevTools自动补全的强大了，在NetWork工具中，DevTools同样实现了强大的自动完成功能。例如对StatusCode进行筛选，当按下「:」之后，会把当前NetWork记录中的出现过的状态码都列出来，不会列出那些没有被记录到的状态码。从程序员的角度来说，是个很不错的细节。

再顺便说下，官方文档https://developer.chrome.com/devtools/docs/network#advanced-filtering 中提到了在筛选条件中输入「-」即为筛选不满足条件的记录例如「-StatusCode:200」，但是在我的Chrome中试了下似乎没有起作用。

高级筛选中的筛选条件有很多种，就不一一赘述了，具体可以看官方的文档，我相信大多数的时候，我们都是直接输入内容对Name和Path进行筛选的。

增加和移除列

NetWork工具中除了之前讲的那些默认显示的项目，我们可以右击NetWork记录表的头部，来增加或者移除某个显示项目。

 

上面的三个按钮，从左往右作用分别是清空NetWork记录列表，显示/隐藏筛选栏，切换简单/详细NetWork记录列表。

保存和复制NetWork记录信息

在NetWork记录上右击，会弹出一个操作菜单，我们可以对复制或者保存当前选中的记录信息

• Copy as cURL，cURL是在命令行下进行HTTP传输的工具，通过Copy as cURL，可以将选中的资源请求以cURL命令的方式复制到剪贴板中。
• Save as HAR with content，有时候我们需要把Network里面内容传给别人，这时候可以通过Save as HAR with content将当前请求保存为一个HAR文件，然后可以通过一些第三方工具进行重现网络信息。
• Replay XHR，如果选中的是XHR请求的话，会出现此选项，方便我们再一次发送此XHR请求。

查看NetWork请求详细信息

当单击某一条NetWork记录的时候，会显示当前请求的详细信息。

Headers

Headers标签显示了当前资源请求的URL、请求方法、以及HTTP响应状态。另外，它还列出了HTTP请求和响应的头部信息。我们可以查看当前请求的缓存控制、附带提交的Cookies、页面Form提交的信息等等。通过本文之前讲的右键菜单提供的复制功能，可以复制请求或者响应的头部信息到剪贴板中。

 

Preview

Preview标签显示了当前请求的资源的预览信息，例如请求的是图片的话，此处会显示该图片的内容。

 

Response

相对于Preview，Response显示的是未经处理的HTTP响应。例如对于JSON格式的响应来说，Preview会把服务器返回的JSON字符串转换成JavaScript对象的形式显示，而Response标签中显示的，就是未经任何处理的字符串。

Cookies

Cookies标签中显示了随当前请求一起发送到服务器的Cookies。

 

Timing

Timeing以瀑布流的形式显示了当前请求中每个部分所花掉的时间。

• Stalled，等待直到可以发送请求状态所花的时间。
• Proxy negoiation，连接代理服务器所花的时间。
• DNS Lookup，执行DNS查找所花的时间，DNS用来实现域名到IP地址的转换。
• Initial connection，初始化连接，包括了TCP握手/重试和SSL握手。
• SSL，花在SSL握手所用的时间。
• Request send，发送请求花去的时间。
• Waiting(TTFB)，TTFB即Time To First Byte的缩写，表示接收到第一个字节的时间。
• Content Download，接收内容所用的时间。

总结

顾名思义，NetWork工具主要用来查看和网络有关的信息，当页面打开缓慢的时候，我们可以通过它来找出原因。另一方面，在开发中可以通过NetWork工具来查看每次请求的Request和Response一起其附带的Cookies，并且让我们查看到前后台之间的数据传输内容，更方便地调试我们的程序。

 

转载自我的技术博客http://www.cc-lab.cn/chrome-dev-tools-4/

（完）