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

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

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

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

时间: 2024-10-10 13:56:04

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

chrome浏览器Network面板请求Timing分析

Timing显示资源在整个请求生命周期过程中各部分话费的时间. Queueing 排队的时间花费.肯能由于该请求被渲染引擎认为是优先级比较低的资源(图片).服务器不可用.超过浏览器并发请求的最大连接数(Chrome的最大并发连接数是6) Stalled(阻塞) 浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接:此外脚本也会阻塞其他组件的下载: 优化措施: 1.将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增

Web协议详解与抓包实战:如何用Chrome的Network面板分析HTTP报文

一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能• 过滤器:过滤请求列表中显示的资源• 按住 Command (Mac)或 Ctrl (Window / Linux),然后点击过滤器可以同时选择多个过滤器• 概览:显示 HTTP 请求.响应的时间轴• 请求列表:默认时间排序,可选择显示列• 概要:请求总数.总数据量.总花费时间等 2.控制器 要跨页面加载保存请求Preserve log 用户的网络比较差的时候问题就可以复现 二.过滤器 1

Chrome浏览器允许跨域请求配置

最近有个做数据标注的任务,但是标注平台是别人公司的,他们又不愿意对平台进行升级改造: 其实要改的地方也很简单,就是对页面做一些处理,做一些脚本控制. 没办法,做了个 iframe 给她嵌入到我们自己的网页里,但是问题来了,就是跨域的问题. iframe 是不允许进行跨域访问的,和ajax请求一样不允许跨域访问. 允许google浏览器跨域ajax提交 在启动chorme时加上 --allow-file-access-from-files 或者 -disable-web-security 建议用前

通过chrome浏览器分析网页加载时间

今天趁着下班的时间看了下chrome浏览器的网页加载时间分析工具和相关文档,简单写点儿东西记录一下. 以百度首页加载为例,分析下一张图片1.jgp(就是背景图)的加载时间 看右侧的Timing标签,从下往上看各个阶段: 最下面一行,Explanation是一个链接,它链接到了chrome对Timing解释的文档(从这里可以看出chrome对开发人员真的很友好),这张图片加载总共花费的时间为:36.32ms. Content Download,浏览器下载响应文件所花费的时间26.84ms,与本地网

Chrome DevTools — Network -- 转载

转载地址:https://segmentfault.com/a/1190000008407729 记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然,记录都是在Network面板展示的. 停止记录网络请求 点击Stop recording network log红色图标,当它变为灰色时,表示DevTools不在记录请求 在Network面板下,Command+E(Mac)或者Ctrl+E(Windows,Linux) 清除网络请求 跨页面加载时,

Chrome 开发者工具详解(2):Network 面板

面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板. 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调试JS. Network

chrome 浏览器的预提取资源机制导致的一个请求发送两次的问题以及ClientAbortException异常

调查一个 pdf 打印报错: ExceptionConverter: org.apache.catalina.connector.ClientAbortException: java.net.SocketException: Software caused connection abort: socket write error at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:407)

Chrome浏览器的Timing分析

以W3C网站为例: Stalled是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接等时间等. SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与SSL在传输层对网络连接进行加密. SSL当前版本为3.0.它已被广泛地用于Web浏览器与服务器之间的身份认

Chrome浏览器不支持本地Ajax请求的解决方案

问题描述: 通过Ajax获取本地JSON文件时候,报Received an invalid response. Origin 'null' is therefore not allowed access. 错误. 原因: Chrome浏览器不支持本地Ajax请求,当在html文件中使用Ajax时候,就报错. 解决方案: 右击chrome浏览器快捷方式图标,选择属性,在目标中添加:--allow-file-access-from-files,与chrome.exe之前有个空格.