chrome查看请求加载时间

1.打开chrome的开发者工具（或F12）

2.切换到network，然后点击请求进行查看

3.切换到Timing

什么是 Waiting (TTFB) 时间

TTFB 是 Time to First Byte 的缩写，指的是浏览器开始收到服务器响应数据的时间（后台处理时间+重定向时间），是反映服务端响应速度的重要指标。TTFB 时间经常超过了页面内容的下载时间，为用户带来不必要的等待时间。这个问题的主要原因是在服务器端。

TTFB 时间多长算长？
因为每个服务器的硬件和网络环境都不尽相同，每个服务器的 TTFB 时间也不相同。大多数服务器的 TTFB 时间都在 50 ms 以下，这个时间就是我们优化时候可以追求的时间。一般来说，TTFB 时间如果超过了 500 ms，用户在打开网页的时候就会感觉到明显的等待。我么可以把 500 ms 以上认为是 TTFB 时间过长。

TTFB 过长的原因
我们知道，对于动态网页来说，服务器收到用户打开一个页面的请求时，首先要从数据库中读取该页面需要的数据，然后把这些数据传入到模版中，模版渲染后，再返回给用户。由于查询数据和渲染模版需要需要一定的时间，在这个过程没有完成之前，浏览器就一致处于等待接收服务器响应的状态。有些服务的性能比较低，或者优化没做好，这个时间就会比较长。

当然，如果服务器到用户之间的网络不好，（比如，服务器在欧洲，用户在中国，用户打开网页的时候，请求需要跨越千山万水才能达到服务器），服务器接收到用户请求的时间过长，也是导致 TTFB 时间过长的原因。

有时候，页面在用户的浏览器中保存了过多的 Cookie，每次请求，这些 Cookie 都要发送到服务器，服务器都要处理这些 Cookie，这也是导致 TTFB 时间过长的原因之一。

Waiting (TTFB) 时间过长的解决办法
知道了原因，解决办法就显而易见了，那就是缩短服务器响应时间，最简单直接并且有效的办法就是使用缓存，把后台逻辑代码 和 MySQL 的执行时间最小化，一些缓存插件可以把 SQL 查询结果缓存起来，把几十次查询结果转换为几次；一些缓存插件可以直接把用户所请求的页面静态化，用户打开网页时，相当于直接从服务器上下载了静态页面。

如果是网络原因，换一个服务器是比较直接的解决办法。如果因为一些原因不能换服务器，可以使用一个 CDN，把页面同步到离用户比较近的 CDN 节点上，也是一个不错的解决办法。

如果是 Cookie 的原因，可以通过修改应用程序，删除一些不必要的 Cookie，或者精简 Cookie 内容，缩短 Cookie 的有效期等，都是解决办法。

---

其他指标解读：

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