简单前端性能优化之Waterfall

对于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点！
努力成为优秀的前端工程师！

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

• SegmentFault技术圈:ES新规范语法糖
• SegmentFault专栏：趁你还年轻，做个优秀的前端工程师
• 知乎专栏：趁你还年轻，做个优秀的前端工程师
• Github博客: 趁你还年轻233的个人博客
• 前端开发QQ群：660634678

• 微信公众号： 人兽鬼 / excellent_developers

  
  
  

努力成为优秀前端工程师！