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

「爱情、让人受尽委屈。」 2021-09-16 14:22 407阅读 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 条评论，407人围观）

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

相关阅读

相关 chrome浏览器F12开发模式network不显示接口请求解决办法

![e21921e22c1c4dce96dcc93cdaaac651.png][] 恢复默认重新加载![7178677f67b24c7ab9e33be41138bb83

忘是亡心i/ 2023年09月28日 08:43/ 0 赞/ 39 阅读

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

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

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

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

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

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

相关使用chrome查看http请求

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 chrome浏览器发送POST请求

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

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

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

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

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