Chrome浏览器开发者工具之瀑布流（Watefall）

一、背景

 在开发中经常遇到平台请求响应特别慢，严重影响使用和用户体验度。此时可以使用Chrome提供的开发者工具在前端页面上具体看到具体那里花费时间，方便定位问题。

 

二、F12中的Watefall是什么？

1、Watefall

Watefall是Chrome的瀑布流，可以看到请求花费时间具体到了那些部分，就是将一次HTTP请求所花的时    间做了拆解，从而有助于分析和定位问题所在。

瀑中有好几种颜色：浅灰，深灰，橙色，绿色，蓝色结合上面的解释，大概知道这些颜色代表的含义了：

• 浅灰：查询中
• 深灰：停滞，代理转发，请求发送
• 橙色：初始连接
• 绿色：等待中
• 蓝色：内容下载

除了这些横向的柱状图外，还有一条纵向的紫色的线

紫线是开始通过脚本加载资源的一个临界线，紫线之前，都是通过HTML文件进行加载的资源，要么是链接的SRC，要么是脚本的SRC;而紫线之后，就成了通过执行HTML文件加载进来的js script，进行加载资源的操作。这条线对于前端工程师至关重要，能够帮助他们进行前端性能优化分析。

2、浏览器F12 waterfall性能检测详解详解

Queueing是排队的意思，浏览器将资源放入队列时间，比如：遇到更高优先级的请求或请求并发超过6了。

Stalled 是阻塞  请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时

Proxy negotiation：与代理服务器协商时间

DNS Lookup ：DNS解析时间，浏览器需要将域名转换成IP。

Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间

SSL https特有,如果网站使用了HTTPS，这个就是浏览器与服务器建立安全性连接的时间

Request sent 发送请求所消耗的时间

Waiting（TTFB）等待服务端返回数据的时间，浏览器等待响应第一个字节到达的时间。包含来回的延迟时间和服务器准备响应的时间，这个时间受制于服务端处理性能，这里一般是最耗时的，

Content Download 浏览器用来下载资源所用的时间。这段时间越长，说明资源越大。理想情况下，你可以通过控制资源的大小来控制这段时间的长度

3、瀑布图提供了三个直观的东西来帮助我们进行前端性能优化

首先，减少所有资源的加载时间。亦即减小瀑布图产品的宽度。瀑布图越窄，网站的访问速度越快

其次，减少请求数量也就是降低瀑布图的高度。瀑布图越矮越好

最后，通过优化资源请求顺序来加快渲染时间。从图上看，就是将绿色的“开始渲染”线向左移。这条线向左移动的越远越好

三、F12的TTFB 是什么？

TTFB （Time to First Byte）：首字节时间。在百度站长工具里面的解释是：“浏览器开始收到服务器响应数据的时间=后台处理时间+重定向时间，是反映服务端响应速度的重要指标”。

“首字节时间”顾名思义就是在浏览器输入目标网站的网址并回车后（或者搜索页面点击打开新的目标页面时）直到获得首个字节的时间。再解释一下，后台处理时间（这应该是浏览器访问目标网站网址时，发出请求，域名服务器的处理时间，将请求发送到目标网站所在服务器ip），重定向时间（这应该是域名服务器将请求发送到目标网站服务器后，如果服务器有重定向设置，就处理重定向的时间）。

总而言之，首字节时间包括DNS、socket连接和请求响应时间，且越短了越好。这是反映服务端响应速度的重要指标。首字节时间越短，表明服务器端（域名DNS服务器和网站服务器）响应速度越快，反之越长，表明服务器端响应速度慢。

TTFB是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间。我们用这个指标来判断你的网络服务器是否性能不够，或者说你是否需要使用CDN。

四、如何优化，降低TTFB时间呢？

1、 看一下详情分析页面。 

（1）DNS解析：如果是 DNS 解析时间太长，那是你的域名解析服务器不好，请更换靠谱的 DNS 服务器。 

（2）初始化连接：如果是初始化连接的时间太长，那是你机房的网络不好，请更换更好的机房 

（3）如果上面两个都不是。那就是你的代码性能不好，代码执行消耗的时间太长。请优化代码，或者更换更好的机器。 

缩短服务器响应时间，最简单直接并且有效的办法就是使用缓存，把 PHP 和 MySQL 的执行时间最小化，一些缓存插件可以把 SQL 查询结果缓存起来，把几十次查询结果转换为几次；一些缓存插件可以直接把用户所请求的页面静态化，用户打开网页时，相当于直接从服务器上下载了静态页面。

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

2、客户端t1时刻发起对于某个url的请求,经过DNS解析获取相应的IP地址后,发起对该IP地址的socket连接，在完成三次握手建立tcp连接后，客户端发送http请求信息，服务端收到请求后返回响应的内容，当客户端在t2时刻收到服务端返回内容的第一个字节，则第一字节时间=t2-t1。 第一字节的时间= DNS解析的时间+socket三次握手时间+http请求时间+第一字节返回的时间。 首字节的时间是0，说明很快呀。不需要做优化