Chrome浏览器Network面板http请求时间分析

「爱情、让人受尽委屈。」 2021-09-16 14:22 374阅读 0赞

转自：[https://www.cnblogs.com/zhenwen/p/5827925.html][https_www.cnblogs.com_zhenwen_p_5827925.html]

Chrome浏览器开发者工具Network窗口下，可以查看下载各组件所需的具体时间

![924717-20160831203718933-1654753476.png][]

**根据上表进行简要分析——**

**Stalled（阻塞）**

浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

优化措施：

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

2、脚本置于页面底部；

**DNS Lookup（域名解析）**

请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。

优化措施：

1、利用DNS缓存（设置TTL时间）；

2、利用Connection:keep-alive特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；

**Initial connection（初始化连接）**

TCP建立连接的三次握手时间

**SSL（包含于HTTPS连接中）**

**　　**http是超文本传输协议，以明文方式发送内容，不提供任何方式的数据加密，如果被不法分子截取浏览器和服务器之间的传输报文，会获取其中的信息。

https 是安全套接字层超文本传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

**Request sent（发送请求）**

发送HTTP请求的时间（从第一个bit到最后一个bit）

优化措施：

1、减少HTTP请求，可以使用CSS Sprites、内联图片、合并脚本和样式表等；

2、对不常变化的组件添加长久的Expires头（相当于设置久远的过期时间），在后续的页面浏览中可以避免不必要的HTTP请求；

**Waiting（等待响应）**

通常是耗费时间最长的。从发送请求到收到响应之间的空隙，会受到线路、服务器距离等因素的影响。

优化措施：

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

**Content Download（下载）**

下载HTTP响应的时间（包含头部和响应体）

优化措施：

1、通过条件Get请求，对比If-Modified-Since和Last-Modified时间，确定是否使用缓存中的组件，服务器会返回“304 Not Modified”状态码，减小响应的大小；

2、移除重复脚本，精简和压缩代码，如借助自动化构建工具grunt、gulp等；

3、压缩响应内容，服务器端启用gzip压缩，可以减少下载时间；

[https_www.cnblogs.com_zhenwen_p_5827925.html]: https://www.cnblogs.com/zhenwen/p/5827925.html
[924717-20160831203718933-1654753476.png]: /images/20210813/80048833d5344fb7a01b0033dc534d0a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，374人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTTP：浏览器HTTP协议请求头信息。

通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。客户端向服务器发送一个请求，请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户信息和

太过爱你忘了你带给我的痛/ 2023年07月25日 12:51/ 0 赞/ 110 阅读

相关 Chrome教程（一）NetWork面板分析网络请求

1.如何打开无论是在Windows还是Mac，都可以使用（FN）+F12键打开Chrome的Network面板。 2.面板组成如图所示，Chrome的Netw

系统管理员/ 2023年02月28日 04:10/ 0 赞/ 14 阅读

相关 chrome浏览器get请求设置header

有时在测试后端接口时可能会用到get请求，比如下载文件接口之类的， ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

淡淡的烟草味﹌/ 2022年12月22日 11:17/ 0 赞/ 329 阅读

相关使用chrome查看http请求

chrome浏览器自带了查看http请求的工具，工具->开发者工具，或者按快捷键ctrl+shift+I。下图是抓取的百度搜索 ![d9881907-a17f-3a

桃扇骨/ 2022年04月14日 05:51/ 1 赞/ 418 阅读

相关 Chrome开发者工具详解(2)-Network面板

Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板

左手的ㄟ右手/ 2022年02月25日 17:24/ 0 赞/ 242 阅读

相关 http协议：http请求、http响应、间隔时间跳转页面、禁用浏览器缓存

转自：https://blog.csdn.net/u013372487/article/details/46991623 http协议 1. http协议是建立在 tcp

川长思鸟来/ 2021年12月23日 09:37/ 0 赞/ 218 阅读

相关 chrome浏览器内存溢出分析

chrome内存溢出问题需要我们在开发者工具中去定位。一边情况下去记录两次的操作后的内存情况，第一次，是记录首次操作后的内存情况，第二次是操作后的内存使用情况，然后进行对比

青旅半醒/ 2021年12月04日 05:53/ 0 赞/ 2891 阅读

相关工具：浏览器NetWork面板http请求时间分析以及优化

Network 工具功能强大，能够让我看到网页加载的信息，比如加载时间，和先后顺序，是否是并行加载，还是堵塞加载。默认情况下有八列: 　（1）.Name：表示加载的文

小咪咪/ 2021年11月06日 00:58/ 0 赞/ 328 阅读

相关 chrome浏览器发送POST请求

fetch(new Request('url',{ method:'POST', headers: {'Content-Type':

约定不等于承诺〃/ 2021年11月04日 18:48/ 0 赞/ 1226 阅读

相关 Chrome浏览器Network面板http请求时间分析

转自：[https://www.cnblogs.com/zhenwen/p/5827925.html][https_www.cnblogs.com_zhenwen_p_5827

「爱情、让人受尽委屈。」/ 2021年09月16日 14:22/ 0 赞/ 375 阅读