对于Network，最常用的功能则是Request，Response和Cookies，但其实有一个功能一直被忽略了，那就是Timing，而单个Timing对应的其实是资源请求行的Waterfall，这是一个对于前端性能优化非常有用的功能。
这是一个页面请求资源后的Waterfall图，可以看出，横坐标代表的是时间轴，纵坐标则是资源加载轴。
1.先来解决第一个问题。
将光标悬浮在某个资源的单个Waterfall上面，我们可以看到，会有一个关于时间layer弹出，而且这个悬浮窗中包含我们想要知道的几种颜色。
下面我以一个表格的形式进行分析：
在0毫秒查询
在9.31毫秒开始
| 资源调度时间 | 颜色 | 时间 |
|---|---|---|
| 查询中 | 浅灰 | 9.31毫秒 |
| 连接开始 | 颜色 | 时间 |
|---|---|---|
| 停滞 | 深灰 | 4.14毫秒 |
| 代理转发 | 深灰 | 0.53毫秒 |
| 请求/响应 | 颜色 | 时间 |
|---|---|---|
| 请求发送 | 深灰 | 0.29毫秒 |
| 等待中 | 绿色 | 20.81毫秒 |
| 内容下载 | 蓝色 | 3.48毫秒 |
总时间：38.03毫秒
可以发分为3部分，第1部分是客户端发送请求前的准备工作，包括资源调度，代理转发等等时间，此时是在为发送http请求做准备工作。
第2部分，也就是其中最重要的等待中时间，它代表的是从请求资源到第一个字节下载完成的时间，即获取在接收到响应的首字节前花费的毫秒数。
第3部分，表示传输时间（下载第一个和最后一个字节之间的时间）。
2.再来解决第二个问题。
紫色的那条线是什么意思，是小学课桌上和同桌画的三八线吗？失误，我记得高一我们班同学还有人这么画，见证了直男和女权者之间的斗争也是蛮有意思的。
啰嗦这么多，紫线是啥意思？
其实紫线是开始通过scripts加载资源的一个临界线，紫线之前，都是通过html文件进行加载的资源，要么是link的src，要么是script的src；而紫线之后，就成了通过执行html文件加载进来的js script，进行加载资源的操作。
有人可能会说，这有什么用呢，对于前端工程师来说，这些时间我们又不能自己控制，而且区分加载文件的来源又有什么意义呢？其实你错了，因为对于Waterfall的学习，是为了学习更加强大的前端性能优化分析的工具Performance做的铺垫。
在下一篇Performance博客中，会从多维度去分析性能优化的东西，而当你认识到Performance的强大之后，会给自己一种从来没有理解过浏览器的感觉。
比如说：
1.FPS,CPU和NET的使用情况？
2.Javascript代码的执行消耗时间？
3.页面的前1毫秒和后1毫秒有什么不同？
4.浏览器对页面的绘制精确到毫秒级的情况？
其中第4点对于理解前端性能优化至关重要，因为这可以引申出浏览器如何渲染网页这个史诗级问题！在下一篇博客中，我们主要研究第4点！
努力成为优秀的前端工程师！
网友评论