前端性能优化工具waterfall

1 利用 waterfall 进行资源加载分析

---

1.1 waterfall 详解

waterfall 是 Network 中，对前端性能优化非常有用的功能

资源加载情况会通过很多颜色来展示：浅灰、深灰、绿、蓝、橙、紫、红

 

把鼠标放在颜色条上，就会有我们想知道的加载时间

 

Resource Scheduling	资源调度时间	Color
Queueing	查询中，排队中，出现下面情况时，浏览器会把当前请求放入队列中进行排队 1）有更高优先级的请求 2）和目标服务器已经建立了6个TCP连接（最多6个，适用于 HTTP/1.0 和 HTTP/1.1 ） 3）浏览器正在硬盘缓存上简单的分配空间	浅灰
Connection Start	连接开始	Color
Stalled	停滞，阻塞 1）请求会因为上面任一原因而阻塞	深灰
DNS Lookup	代理转发，浏览器正在解析IP地址 1）在浏览器和服务器进行通信之前，必须进过 DNS 查询，将域名转换成 IP 地址 2）在这个阶段，前端可以处理的东西很少，但是并非所有的请求都需要经过这一阶段	深灰
Initial connection	在浏览器发送请求之前, 必须建立TCP连接 1）这个过程仅仅发生在瀑布图中的开头几行, 否则这就是个性能问题	橙色
Request/Response	请求\响应	Color
Request sent	请求发送	深灰
Waiting(TTFB)	等待中 1）Time To First Byte 2）浏览器等待响应第一个字节到达的时间，包含来回的延迟时间和服务器准备响应的时间 3）通常用这个指标啦判断 Web 服务器是否性能不够，是否需要使用 CDN	绿色
Connect Download	内容下载 1）下载资源的时间，这段时间越长，说明资源越大	蓝色

紫线 是开始通过 scripts 加载资源的一个临界线，紫线之前，都是通过 html 文件进行加载的资源，要么是 link 的 src，要么是script 的 src；而紫线之后，就成了通过执行 html 文件加载进来的 js script，进行加载资源的操作。

1.2 根据 waterfall 进行性能优化

• 减少所有资源的加载时间。即减小 waterfall 的宽度，宽度越窄，网站访问速度越快
• 减少请求数量。即降低 waterfall 的高度
• 优化资源请求速度。从图上看，即将绿色的 ”开始渲染“ 线向左移，这条线向左移动的越远越好

下载顺序优先级：Higthest -> High -> Medium -> Low

因为浏览器并发数 limit 是 6，如果两个 url 相同，就表示两个资源的下载共用的同一个 tcp 长连接。

具体针对性优化措施

阶段	原理	优化措施
Stalled	浏览器对同一个主机域名并发连接数有限制 (6)，若当前的连接数超过上限，那么其余请求就会被阻塞，等待新的可用连接，此外，脚本也会阻塞其他组价的下载	1）将资源合理分配到多台主机上，可用提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和 CPU 的速度，过多的并行下载会降低性能； 2）脚本置于页面底部；
DNS Lookup	请求某域名下的资源，浏览器需要先通过 DNS 解析器得到该域名服务器的 IP 地址，在 DNS 查找完成之前，浏览器不能从主机那里下载到任何资源	1）利用 DNS 缓存（设置TTL时间）； 2）利用Connection:keep-alive 特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；
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压缩，可以减少下载时间；