使用浏览器自带的 NetWork 提高我们的开发效率、减少我们查找错误的时间

当我们开发web端的添加页面的时候，总是会报一些稀奇古怪的问题，尤其是导入、上传等功能。

大多数时候，页面或者后端开发工具都会给报出相应的错误，可以自己根据错误可以解决掉，但是也有很大一部分问题常用工具无法帮我们找到。如上传的时候因为MultipartFile类型的数据，导致我们什么错误也接收不到，程序就是不对，我们光知道什么反应也没有，代码就是走着走着就跟丢了似的，这时候我们需要相信的知道我们提交的数据是什么类型，携带什么参数，走到了哪里等等 。这些事情，开发工具在特殊情况下是没法提供了的，这时候我们可以使用浏览器自带的网络监控工具进行查看

诸如上面这样的表单，当我们点击保存按钮的时候，我们可以在控制台看到对应的详细的请求方式以及携带的参数和访问的时间，以及文件的加载顺序，等等：

1）如上图，圈1处说明了在15000~5000ms之间这段时间里浏览器什么也没干，就是在等待后台返回数据，也就是说在圈2处的这个方法耗时50000-15000=35000ms的时间。

2）圈1处的两个箭头的地方是可以拖动的，当你拖动他的时候，你会发现，绿色的就是访问到的文件并且长短就是加载该文件所需要的时间，你可以拖到任意地方看看某段时间内加载了什么文件，加载时携带的参数是什么。

3）然后圈2处的name和time列，在一起也说明了，每个文件加载的时间间隔是多少，加载的什么文件，加载顺序是什么顺序，每个文件加载共耗时多久，等等，从status列可以看到你的哪个文档又没有加载成功。

再如：

上图参数说明：

General：请求的基本信息，包括访问地址、访问类型（post、get）、请求是否成功、端口等信息；

Response Headers：回应头的信息，回应的内容可在上图的Response页签进行查看；

Request Headers：请求头的信息

Form Data：请求头所携带的详细的参数，尤其是在form表单提交的时候，配合使用return函数，就可以看到请求的具体参数。

4）再如，因为这是一个简单的添加表单，咱们点击保存的那一瞬间，程序先干了什么，咱们怎么知道？把执行时间拖到如上图所示的地方，我们可以看到，在这段很短的时间内，程序共访问了两个后端接口：saveZkdgwhObj、getInitParamList。

5）当我们点击第一个方法 saveZkdgwhObj 的时候，我们可以清楚的看到请求的具体地址、端口号、请求状态以及详细的表单内容参数及类型，这样我们也就不用使用console什么的打印了，这样就很方便啊，省得写代码删代码，忘记删除还影响性能(可忽略)。

6）上面两图可以清晰的看到preview页签的作用就是返回对象了的具体内容了，根本不需要使用alert等输出来查看的；当请求失败的时候，或者请求成功没有刷新页面的时候，我们点击preview页签时我们会发现详细的错误信息，这里可以看到idea等工具看不到的错误提示信息哦。

7) 百度了下上图各参数的含义：

参数具体含义：

Queueing：请求文件顺序的排序。浏览器是有线程限制的，发请求也不能所有的请求同时发送，会将请求加入队列中（Chrome的最大并发连接数是6）。此参数表示从添加到待处理队列，到实际开始处理的时间间隔标示。

Stalled（阻塞）：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

优化措施：
1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；
2、脚本置于页面底部；

DNS Lookup：请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。DNS查询的时间，当本地DNS缓存没有的时候，这个时间可能是有一段长度的，但是比如你一旦在host中设置了DNS，或者第二次访问，由于浏览器的DNS缓存还在，这个时间就为0了。

优化措施：
1、利用DNS缓存（设置TTL时间）；
2、利用Connection:keep-alive特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；

Initial connection：建立TCP连接的时间，就相当于客户端从发请求开始到TCP握手结束这一段，包括DNS查询+Proxy时间+TCP握手时间。

SSL（包含于HTTPS连接中）：http是超文本传输协议，以明文方式发送内容，不提供任何方式的数据加密，如果被不法分子截取浏览器和服务器之间的传输报文，会获取其中的信息。
https 是安全套接字层超文本传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

Request sent（发送请求）：发送HTTP请求的时间（从第一个字节发出前到最后一个字节发出后的时间）

优化措施：
1、减少HTTP请求，可以使用CSS Sprites、内联图片、合并脚本和样式表等；
2、对不常变化的组件添加长久的Expires头（相当于设置久远的过期时间），在后续的页面浏览中可以避免不必要的HTTP请求；

Waiting(TTFB) ：请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)，发送请求完毕到接收请求开始的时间；通常是耗费时间最长的。从发送请求到收到服务器响应的第一字节之间的时间，受到线路、服务器距离等因素的影响。
注意：网页重定向越多，TTFB越高，所以要减少重定向

优化措施：
使用CDN，将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高响应速度；

Content Download（下载）：收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。

优化措施：
1、通过条件Get请求，对比If-Modified-Since和Last-Modified时间，确定是否使用缓存中的组件，服务器会返回“304 Not Modified”状态码，减小响应的大小；
2、移除重复脚本，精简和压缩代码，如借助自动化构建工具grunt、gulp等；
3、压缩响应内容，服务器端启用gzip压缩，可以减少下载时间；

等等等等，自己慢慢研究吧。