利用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/
(完)