chrome浏览器F12 Network中Timing参数含义

前言

Chrome浏览器开发者工具Network窗口下，Timing中显示资源在整个请求生命周期过程中各部分花费的时间。

Timing各参数截图如下：

参数具体含义：

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压缩，可以减少下载时间；

原文地址：chrome浏览器F12 Network中Timing参数含义

chrome浏览器F12 Network中Timing参数含义相关推荐

Chrome浏览器开发者工具中的 Performance
目录 ■Chrome浏览器开发者工具中的 Performance ■画面 ■代码 (2009年前后,大学时期写的代码.) ■工作中的使用 (两个系统同时运行) --- ■Chrome浏览器开发者工 ...
Chrome浏览器 F12控制台中文改成英文
当Chrome浏览器 F12控制台是中文,怎么设置成英文? 第一步:点击控制台右上角的设置图标第二步:"语言"选项从浏览器界面语言设置成英文第三步:重新加载DevTools,控 ...
Chrome浏览器F12讲解
Chrome浏览器相对于其他的浏览器而言,DevTools(开发者工具)非常强大.这节课将为大家介绍怎么利用Chrome浏览器的开发者工具进行HTTP请求分析 Chrome浏览器讲解 Chrome 开 ...
SocketLog-微信调试、API调试和AJAX的调试的工具，能将日志通过WebSocket输出到Chrome浏览器的console中
说明 SocketLog适合Ajax调试和API调试, 举一个常见的场景,用SocketLog来做微信调试, 我们在做微信API开发的时候,如果API有bug,微信只提示"改公众账号暂时无法 ...
chrome浏览器开发者模式header请求参数“Request Payload“找不到的问题
今天查看接口的时候,发现chrome(谷歌)浏览器开发者工具中,接口请求的参数看不见了,对比一下其他浏览器,还是能看到请求的参数的.查看开发者工具的请求区域,发现了一栏"Payload&qu ...
理解YOLOv2训练过程中输出参数含义
转载自https://blog.csdn.net/dcrmg/article/details/78565440 原英文地址: https://timebutt.github.io/static/und ...
cv2.putText()函数中各个参数含义
检测框cv2.putText()函数中各个参数表示含义 cv2.putText(img,text,org, fontFace, fontScale, color, thinckness, lineTy ...
chrome浏览器F12调试模式network不显示接口请求地址解决办法
重置设置即可
chrome浏览器f12的network里的请求行变得很大的解决方案
如题:上面这种请求行很大不适应,要改成小请求行,只需点击下面这个按钮来切换.

chrome浏览器F12 Network中Timing参数含义

前言

chrome浏览器F12 Network中Timing参数含义相关推荐

最新文章

热门文章