network工具功能强大,可以让我看到网页加载的信息,好比加载时间,和前后顺序,是不是并行加载,仍是堵塞加载。 css
(1).Name:表示加载的文件名。 gulp
(2).Method:表示请求的方式。 windows
(3).Status:表示状态码(200为请求成功,304表示从缓存读取)。 浏览器
(4).Type:表示文件的MIME Type的类型。 缓存
(5).Initiator:表示发出这个文件请求的发出者。 服务器
(6).Size:表示文件大小。 网络
(7).Time:表示每一个请求的总时长。并发
(8).Timeline:以图表的形式显示元素的请求和加载状况。 tcp
固然内容不只仅先于以上8个,右击上面八个任意一个选项卡能够弹出一个菜单,能够查看更多内容: ide
通常常规的优化包括:css、js合并压缩、图片压缩、雪碧图、静态资源所有上CDN,通常这些都作了可是慢的话,这是时候问题通常出在Stalled阻塞了,以下图:
Time the request spent waiting before it could be sent. This time is inclusive of any time spent in proxy negotiation.Additionally, this time will include when the browser is waiting for an already established connection to become available for re-use, obeying Chrome’s maximum six TCP connection per origin rule.
也便是从TCP链接创建完成,到真正能够传输数据之间的时间差。先让咱们要分析TCP链接为何要等待这么久才能用?用Wireshark抓包发现(以下图),TCP链接过程当中有屡次重传,直到达到最大重传次数后链接被客户端重置。
The sender waits for an ACK for the byte-range sent to the client and when not received, resends the packets, after a particular interval. After a certain number of retries, the host is considered to be “down” and the sender gives up and tears down the TCP connection.
TCP三次握手后,发送端发送数据后,一段时间内(不一样的操做系统时间段不一样)接收不到服务端ACK包,就会以 某一时间间隔(时间间隔通常为指数型增加)从新发送,从重传开始到接收端正确响应的时间就是stalled阶段。而重传超过必定的次数(windows系统是5次),发送端就认为本次TCP链接已经down掉了,须要从新创建链接。 对比如下,没有重传的http请求过程。以下图:
另外,须要注意的是:浏览器对同一个主机域名的并发链接数有限制,所以若是当前的链接数已经超过上限,那么其他请求就会被阻塞,等待新的可用链接;此外脚本也会阻塞其余组件的下载,被阻塞的请求的stalled也会很长。
总结一下:
1,单一服务发送时候stalled过长,每每是丢包所致,这也意味着网络或服务端有问题。
2,多个服务并发致使stalled过长,是浏览器对同一个主机域名的并发链接数有限制,过长的请求是被阻塞了,处在队列中等待tcp链接
因此,stalled阶段是浏览器获得要发出这个请求的指令,到请求能够发出的等待时间,通常是代理协商、以及等待可复用的TCP链接释放的时间,不包括DNS查询、创建TCP链接等时间等。
优化措施: 一、将资源合理分布到多台主机上,能够提升并发数,可是增长并行下载数量也会增大 开销,这取决于带宽和CPU速度,过多的并行下载会下降性能; 二、脚本置于页面底部;
请求某域名下的资源,浏览器须要先经过DNS解析器获得该域名服务器的IP地址。在DNS查找完成以前,浏览器不能从主机名那里下载到任何东西。
优化措施: 一、利用DNS缓存(设置TTL时间); 二、利用Connection:keep-alive特性创建持久链接,能够在当前链接上进行多个请求,无需再进行域名解析;
TCP创建链接的三次握手时间
请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间。 发送HTTP请求的时间(从第一个bit到最后一个bit)
优化措施: 一、减小HTTP请求,可使用CSS Sprites、内联图片、合并脚本和样式表等; 二、对不常变化的组件添加长久的Expires头(至关于设置久远的过时时间),在后续的页面浏览中能够避免没必要要的HTTP请求;
请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte)。
一般是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。
优化措施: 一、使用CDN,将用户的访问指向距离最近的工做正常的缓存服务器上,由缓存服务器直接响应用户请求,提升响应速度;
收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间。 下载HTTP响应的时间(包含头部和响应体)
优化措施: 一、经过条件Get请求,对比If-Modified-Since和Last-Modified时间,肯定是否使用缓存中的组件,服务器会返回“304Not Modified”状态码,减少响应的大小; 二、移除重复脚本,精简和压缩代码,如借助自动化构建工具grunt、gulp等; 三、压缩响应内容,服务器端启用gzip压缩,能够减小下载时间;