网络面板
1.控制器
红色圆点的按钮，表示“开始/暂停抓包”，这个功能很常⻅，很容易理解。
“全局搜索”按钮，这个功能就非常重要了，可以在所有下载资源中搜索相关内容，还可以快速定位到某
几个你想要的文件上。
Disablecache，即“禁止从Cache中加载资源”的功能，它在调试Web应用的时候非常有用，因为开启了Cache会影响到网络性能测试的结果。
Online按钮，是“模拟2G/3G”功能，它可以限制带宽，模拟弱网情况下⻚面的展现情况，然后你就可以根据实际展示情况来动态调整策略，以便让Web应用更加适用于这些弱网。
2.过滤器
时候一个⻚面有太多内容在详细列表区域中展示了，而你可能只想查看JavaScript文件或者CSS文件，这时候就可以通过过滤器模块来筛选你想要的文件类型
3.抓图信息
抓图信息区域，可以用来分析用戶等待⻚面加载时间内所看到的内容，分析用戶实际的体验情况。比如，如果⻚面加载1秒多之后屏幕截图还是白屏状态，这时候就需要分析是网络还是代码的问题了。（勾选面板上的“Capturescreenshots”即可启用屏幕截图。）
4.时间线4
时间线，主要用来展示HTTP、HTTPS、WebSocket加载的状态和时间的一个关系，用于直观感受⻚面的加载过程。如果是多条竖线堆叠在一起，那说明这些资源被同时被加载。至于具体到每个文件的加载信息，还需要用到下面要讲的详细列表。
5.详细列表
这个区域是最重要的，它详细记录了每个资源从发起请求到完成请求这中间所有过程的状态，以及最终请求完成的数据信息。通过该列表，你就能很容易地去诊断一些网络问题。
6.下载信息概要 DOMContentLoaded，这个事件发生后，说明⻚面已经构建好DOM了，这意味着构建DOM所需要的HTML文件、JavaScript文件、CSS文件都已经下载完成了
Load，说明浏览器已经加载了所有的资源（图像、样式表等）。
网络面板中的详细列表
1. 列表的属性
列表的属性比较多，比如Name、Status、Type、Initiator等等，这个不难理解。当然，你还可以通过点击右键的下拉菜单来添加其他属性，这里我就不再赘述了，你可以自己上手实操一下。
另外，你也可以按照列表的属性来给列表排序，默认情况下，列表是按请求发起的时间来排序的，最早发起请求的资源在顶部。当然也可以按照返回状态码、请求类型、请求时⻓、内容大小等基础属性排序，只需点击相应属性即可。
2.详细信息
3.单个资源的时间线
那面板中这各项到底是什么含义呢？
第一个是Queuing，也就是排队的意思，当浏览器发起一个请求的时候，会有很多原因导致该请求不能被立即执行，而是需要排队等待。导致请求处于排队状态的原因有很多。
1.⻚面中的资源是有优先级的，比如CSS、HTML、JavaScript等都是⻚面中的核心文件，所以优先级最高；而图片、视频、音频这类资源就不是核心资源，优先级就比较低。通常当后者遇到前者时，就需要“让路”，进入待排队状态。
2.我们前面也提到过，浏览器会为每个域名最多维护6个TCP连接，如果发起一个HTTP请求时，这6个TCP连接都处于忙碌状态，那么这个请求就会处于排队状态。
3。最后，网络进程在为数据分配磁盘空间时，新的HTTP请求也需要短暂地等待磁盘分配结束。
等待排队完成之后，就要进入发起连接的状态了。不过在发起连接之前，还有一些原因可能导致连接过程被推迟，这个推迟就表现在面板中的StalledStalled上，它表示停滞的意思
这里需要额外说明的是，如果你使用了代理服务器，还会增加一个ProxyNegotiationProxyNegotiation阶段也就是代理协商阶段，它表示代理服务器连接协商所用的时间
Initialconnection/SSL阶段 也就是和服务器建立连接的阶段，这包括了建立TCP连接所花费的时间；不过如果你使用了HTTPS协议，那么还需要一个额外的SSL握手时间，这个过程主要是用来协商一些加密信息的。（关于SSL协商的详细过程，我们会在Web安全模块中介绍。）
和服务器建立好连接之后，网络进程会准备请求数据，并将其发送给网络，这就是Requestsent阶段Requestsent阶段。通常这个阶段非常快，因为只需要把浏览器缓冲区的数据发送出去就结束了，并不需要判断服务器是否接收了，所以这个时间通常不到1毫秒。
数据发送出去了，接下来就是等待接收服务器第一个字节的数据，这个阶段称为Waiting(TTFB)，通常也称为“第一字节时间第一字节时间”。TTFB是反映服务端响应速度的重要指标，对服务器来说，TTFB时间越短，就说服务器响应越快。
接收到第一个字节之后，进入陆续接收完整数据的阶段，也就是ContentDownload阶段ContentDownload阶段这意味着从第 一字节时间到接收到全部响应数据所用的时间。
优化时间线上耗时项
**1.排队（Queuing）时间过久 **
排队时间过久，大概率是由浏览器为每个域名最多维护6个连接导致的。那么基于这个原因，你就可以让1个站点下面的资源放在多个域名下面，比如放到3个域名下面，这样就可以同时支持18个连接了，这种方案称为域名分片域名分片技术。除了域名分片技术外，我个人还建议你把站点升级到HTTP2把站点升级到HTTP2，因为HTTP2已经没有每个域名最多维护6个TCP连接的限制了。
2.第一字节时间（TTFB）时间过久
服务器生成⻚面数据的时间过久。对于动态网⻚来说，服务器收到用戶打开一个⻚面的请求时，首先要从数据库中读取该⻚面需要的数据，然后把这些数据传入到模板中，模板渲染后，再返回给用戶。服务器在处理这个数据的过程中，可能某个环节会出问题。
网络的原因。比如使用了低带宽的服务器，或者本来用的是电信的服务器，可联通的网络用戶要来访问你的服务器，这样也会拖慢网速。
发送请求头时带上了多余的用戶信息。比如一些不必要的Cookie信息，服务器接收到这些Cookie信息之后可能需要对每一项都做处理，这样就加大了服务器的处理时⻓。
对于这三种问题，你要有针对性地出一些解决方案。面对第一种服务器的问题，你可以想办法去提高服务器的处理速度，比如通过增加各种缓存的技术；针对第二种网络问题，你可以使用CDN来缓存一些静态文件；至于第三种，你在发送请求时就去尽可能地减少一些不必要的Cookie数据信息。
3.ContentDownload时间过久
如果单个请求的ContentDownload花费了大量时间，有可能是字节数太多的原因导致的，减少字节数。
