浏览器 Network 面板 http 请求时间分析及优化

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

Network 工具功能强大，能够让我看到网页加载的信息，比如加载时间，和先后顺序，是否是并行加载，还是堵塞加载。

默认情况下有八列:
　（1）.Name：表示加载的文件名。
　（2）.Method：表示请求的方式。
　（3）.Status：表示状态码（200为请求成功，304表示从缓存读取）。
　（4）.Type：表示文件的MIME Type的类型。
　（5）.Initiator：表示发出这个文件请求的发出者。
　（6）.Size：表示文件大小。
　（7）.Time：表示每个请求的总时长。
　（8）.Timeline：以图表的形式显示元素的请求和加载情况。

当然内容不仅仅先于以上8个，右击上面八个任意一个选项卡可以弹出一个菜单，可以查看更多内容:

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

---

一、Stalled（阻塞）：

浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。

浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

优化措施：

• 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（等待响应）:

请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)。

通常是耗费时间最长的。从发送请求到收到响应之间的空隙，会受到线路、服务器距离等因素的影响。

优化措施：

• 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