chrome开发者工具使用之NetWork

一、界面介绍

1、操作区域
【Preserve log：勾选后，刷新页面，之前的请求日志还在】
2、过滤区域
3、总览图：通过选中总览图中的某段时间，可以进行详细分析
4、资源table
5、总结区域：显示总共有多少请求，传输的文件大小，页面在什么时候请求完成、DOMContentLoaded在什么时刻触发，load事件在什么时刻触发

二、资源请求的阶段

1、Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
2、Stalled （阻塞）从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。
3、Proxy Negotiation 与代理服务器连接的时间花费。
4、DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。
5、Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。
6、SSL 完成SSL握手的时间花费。
7、Request sent 发起请求的时间。
8、Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
9、Content Download 获取Response响应数据的时间花费。

三、资源详细信息

点击资源名称可以查看：请求头信息、返回结果、返回结果预览、cookie