前后的撕逼关键，看懂waterfall图

[liucaieson]

打开开发者工具，Network里面点击一个请求

会看到一道道绿条
就是这样

名词释义

• Queueing浏览器将资源放入队列时间，比如：遇到更高优先级的请求或请求并发超过6了。
• Stalled 因放入队列时间而发生的停滞时间，这几个时间都很短
• DNS Lookup 查询时间
• initial connection 在浏览器发送请求之前,必须建立tcp请求,所以一般会出现在前几个请求
• ssl/tls negotiation 建立安全协议 谷歌已经将https权重提高
• Request sent 发送请求所消耗的时间
• Time To First Byte (TTFB)  - TTFB 是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间. 我们用这个指标来判断你的web服务器是否性能不够, 或者说你是否需要使用CDN.
• Downloading (蓝色) - 这是浏览器用来下载资源所用的时间.

在某些时候，这个图很有用，当其他人问你，为什么页面这么卡的时候，你可以看这里主要是TTFB，因为内网可以完全忽略延迟的影响，那么这个指标就代表服务器处理这个接口的耗时了

还有条线

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