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压缩,可以减少下载时间;
转载至:http://www.cnblogs.com/zhenwen/p/5827925.html
Chrome浏览器Network面板http请求时间分析的更多相关文章
- chrome浏览器Network面板请求Timing分析
Timing显示资源在整个请求生命周期过程中各部分话费的时间. Queueing 排队的时间花费.可能由于该请求被渲染引擎认为是优先级比较低的资源(图片).服务器不可用.超过浏览器并发请求的最大连接数 ...
- chrome浏览器network面板出现:Provisional headers are shown 提示
一般来说,如果看到这个提示,说明这个请求并没有发送出去. 具体原因有多种: 请求被某些扩展如 Adblock 拦截了 请求被墙了 走本地缓存或者 dataurl 的请求 client发送请求后,由于各 ...
- 谷歌chrome浏览器network中Stalled分析和优化
谷歌chrome浏览器network中Stalled分析和优化 问题由来 最近项目上要求首页的加载速度,查看浏览器的network发现接口加载速度非常慢. 问题解决思路 SSL 网上有人因为图片加载, ...
- Web协议详解与抓包实战:HTTP1协议-如何用Chrome的Network面板分析HTTP报文(1)
一.Chrome 抓包:Network 面板 1. Network 面板 • 控制器:控制面板的外观与功能 • 过滤器:过滤请求列表中显示的资源 • 按住 Command (Mac)或 Ctrl (W ...
- Chrome浏览器允许跨域请求配置
最近有个做数据标注的任务,但是标注平台是别人公司的,他们又不愿意对平台进行升级改造: 其实要改的地方也很简单,就是对页面做一些处理,做一些脚本控制. 没办法,做了个 iframe 给她嵌入到我们自己的 ...
- 通过chrome浏览器分析网页加载时间
今天趁着下班的时间看了下chrome浏览器的网页加载时间分析工具和相关文档,简单写点儿东西记录一下. 以百度首页加载为例,分析下一张图片1.jgp(就是背景图)的加载时间 看右侧的Timing标签,从 ...
- Chrome教程之NetWork面板分析网络请求
官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 最近打算写一写Chrome教程文档,不知道大家最感兴趣的是什 ...
- Chrome教程(一)NetWork面板分析网络请求
官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 1.如何打开 无论是在Windows还是Mac,都可以使用( ...
- Chrome DevTools — Network -- 转载
转载地址:https://segmentfault.com/a/1190000008407729 记录网络请求 默认情况下,只要DevTools在开启状态,DevTools会记录所有的网络请求,当然, ...
随机推荐
- 数据库schema设计与优化
原文地址 1. 前言 对于数据库而言,在日常开发中我们主要的关注点有两块,一个是schema的结构设计,另一个就是索引的优化,这两块是影响我们最终系统结构和性能的关键部分,自然也是我们花费精力最多的部 ...
- php extract 函数的妙用 数组键名为声明为变量,键值赋值为变量内容
extract 函数的妙用 数组键名为声明为变量,键值赋值为变量内容 它的主要作用是将数组展开,键名作为变量名,元素值为变量值,可以说为数组的操作提供了另外一个方便的工具
- Sql Server分割字符串函数
-- Description: 分割字符串函数 -- SELECT * FROM dbo.Split('a,b,c,d,e,f,g',',') -- ========================= ...
- [转载]《民航科技》2012年4月专家论坛:罗喜伶《SWIM技术国际研究动态及对中国民航的借鉴意义》
专家介绍:罗喜伶,北京航空航天大学电子信息工程学院副教授,工学博士,硕士生导师,国家空管新航行系统技术重点实验室和协同式网络化空中交通管理系统研究教育部创新团队核心成员,民航空管广域信息系统专家组成员 ...
- ./upload/forum.php
这是forum.php的全部代码,然后试着读一读,自己做做笔记. define('APPTYPEID', 2); define('CURSCRIPT', 'forum'); define(); 定义常 ...
- Lucene.net 高亮显示搜索词
网站搜索关键词,往往搜索的结果中,要把用户搜索的词突出显示出来,这就是高亮搜索词的含义.而lucene也恰恰支持这样的操作.在此,我用的是盘古的组件,代码如下: PanGu.HighLight.Sim ...
- (转)ArcGIS制图技巧
ArcGIS制图技巧(转载自新浪博客) 1 引言 1.1 制图的目的 随着GIS在各行各业的深入应用,各信息化部门和生产单位都逐渐建立起自己的GIS的应用,同时积累了大量的地理数据.随着应用深 ...
- 简单的java socket 示例
一.搭建服务器端 a).创建ServerSocket对象绑定监听端口. b).通过accept()方法监听客户端的请求. c).建立连接后,通过输入输出流读取客户端发送的请求信息. d).通过输出流向 ...
- Linux下随机密码生成器
参考资料: 1:http://justwinit.cn/post/5164/ 2:http://www.linuxidc.com/Linux/2012-11/73687.htm
- SQL Server 自定义聚合函数
说明:本文依据网络转载整理而成,因为时间关系,其中原理暂时并未深入研究,只是整理备份留个记录而已. 目标:在SQL Server中自定义聚合函数,在Group BY语句中 ,不是单纯的SUM和MAX等 ...