對于Network爱只，最常用的功能則是Request画畅，Response和Cookies，但其實有一個功能一直被忽略了渣锦，那就是Timing诚些，而單個Timing對應(yīng)的其實是資源請求行的Waterfall飞傀，這是一個對于前端性能優(yōu)化非常有用的功能。
這是一個頁面請求資源后的Waterfall圖诬烹，可以看出砸烦，橫坐標代表的是時間軸，縱坐標則是資源加載軸绞吁。
1.先來解決第一個問題马僻。
將光標懸浮在某個資源的單個Waterfall上面庄拇，我們可以看到，會有一個關(guān)于時間layer彈出，而且這個懸浮窗中包含我們想要知道的幾種顏色措近。
下面我以一個表格的形式進行分析：
在0毫秒查詢
在9.31毫秒開始
| 資源調(diào)度時間 | 顏色 | 時間 |
|---|---|---|
| 查詢中 | 淺灰 | 9.31毫秒 |
| 連接開始 | 顏色 | 時間 |
|---|---|---|
| 停滯 | 深灰 | 4.14毫秒 |
| 代理轉(zhuǎn)發(fā) | 深灰 | 0.53毫秒 |
| 請求/響應(yīng) | 顏色 | 時間 |
|---|---|---|
| 請求發(fā)送 | 深灰 | 0.29毫秒 |
| 等待中 | 綠色 | 20.81毫秒 |
| 內(nèi)容下載 | 藍色 | 3.48毫秒 |
總時間：38.03毫秒
可以發(fā)分為3部分溶弟，第1部分是客戶端發(fā)送請求前的準備工作，包括資源調(diào)度瞭郑，代理轉(zhuǎn)發(fā)等等時間辜御，此時是在為發(fā)送http請求做準備工作。
第2部分屈张，也就是其中最重要的等待中時間擒权，它代表的是從請求資源到第一個字節(jié)下載完成的時間，即獲取在接收到響應(yīng)的首字節(jié)前花費的毫秒數(shù)阁谆。
第3部分碳抄，表示傳輸時間（下載第一個和最后一個字節(jié)之間的時間）。
2.再來解決第二個問題场绿。
紫色的那條線是什么意思剖效，是小學課桌上和同桌畫的三八線嗎？失誤焰盗，我記得高一我們班同學還有人這么畫璧尸，見證了直男和女權(quán)者之間的斗爭也是蠻有意思的。
啰嗦這么多熬拒，紫線是啥意思爷光？
其實紫線是開始通過scripts加載資源的一個臨界線，紫線之前澎粟，都是通過html文件進行加載的資源瞎颗，要么是link的src，要么是script的src捌议；而紫線之后，就成了通過執(zhí)行html文件加載進來的js script引有，進行加載資源的操作瓣颅。
有人可能會說，這有什么用呢譬正，對于前端工程師來說宫补，這些時間我們又不能自己控制，而且區(qū)分加載文件的來源又有什么意義呢曾我？其實你錯了粉怕，因為對于Waterfall的學習，是為了學習更加強大的前端性能優(yōu)化分析的工具Performance做的鋪墊抒巢。
在下一篇Performance博客中贫贝，會從多維度去分析性能優(yōu)化的東西，而當你認識到Performance的強大之后，會給自己一種從來沒有理解過瀏覽器的感覺稚晚。
比如說：
1.FPS,CPU和NET的使用情況崇堵？
2.Javascript代碼的執(zhí)行消耗時間？
3.頁面的前1毫秒和后1毫秒有什么不同客燕？
4.瀏覽器對頁面的繪制精確到毫秒級的情況鸳劳？
其中第4點對于理解前端性能優(yōu)化至關(guān)重要，因為這可以引申出瀏覽器如何渲染網(wǎng)頁這個史詩級問題也搓！在下一篇博客中赏廓，我們主要研究第4點！
努力成為優(yōu)秀的前端工程師傍妒！
期待和大家交流幔摸，共同進步，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關(guān)的技術(shù)討論小組：
- SegmentFault技術(shù)圈:ES新規(guī)范語法糖
- SegmentFault專欄：趁你還年輕拍顷，做個優(yōu)秀的前端工程師
- 知乎專欄：趁你還年輕抚太，做個優(yōu)秀的前端工程師
- Github博客: 趁你還年輕233的個人博客
- 前端開發(fā)QQ群：660634678
微信公眾號： 人獸鬼 / excellent_developers
努力成為優(yōu)秀前端工程師！
