Fiddler Timeline 如圖右邊區(qū)域，主要用法是直觀的顯示頁(yè)面各個(gè)元素的加載時(shí)間和順序，其中fiddler的Timeline相比Chrome 的developer tools更為強(qiáng)大的地方是可以直觀的顯示tcp網(wǎng)絡(luò)連接與斷開(kāi)情況。

?

每個(gè)網(wǎng)絡(luò)請(qǐng)求都會(huì)經(jīng)歷域名解析、建立連接、發(fā)送請(qǐng)求、接受數(shù)據(jù)等階段。把多個(gè)請(qǐng)求以時(shí)間作為 X 軸，用圖表的形式展現(xiàn)出來(lái)，就形成了瀑布圖。在 Fiddler 中，只要在左側(cè)選中一些請(qǐng)求，右側(cè)選擇“Timeline”標(biāo)簽，就可以看到這些請(qǐng)求的瀑布圖，如下（點(diǎn)擊查看大圖）：

看到這張圖，你是否可以回答這些問(wèn)題：

a.圖標(biāo)的 Y 軸上顯示的是簡(jiǎn)化后的 URL。為什么有些是綠色的，有些是黑色的？

b.為什么第一個(gè)請(qǐng)求用陰影線(xiàn)來(lái)表示，其它請(qǐng)求卻都是實(shí)心的？

c.請(qǐng)求條的不同顏色分別代表什么？

d.每個(gè)請(qǐng)求中的黑色豎線(xiàn)表示什么？

e.請(qǐng)求后面的圖標(biāo)（如閃電和軟盤(pán)）代表了什么？

f.每個(gè)請(qǐng)求前面兩個(gè)小圓圈是什么，為什么有的是紅色，有的是綠色？

?

如果其中一個(gè)或者多個(gè)你不知道答案也沒(méi)關(guān)系，下面將一一揭曉。

1、綠色的請(qǐng)求表示這是一個(gè)“有條件的請(qǐng)求”。HTTP 協(xié)議定義了 5 個(gè)條件請(qǐng)求頭部，最常見(jiàn)的兩個(gè)是“If-Modified-Since”和“If-None-Match”。服務(wù)器根據(jù)這兩個(gè)頭部來(lái)驗(yàn)證本地緩存是否過(guò)期，如果過(guò)期則正常返回資源的最新版本；否則僅返回 304 Not Modified，瀏覽器繼續(xù)使用本地緩存。包含條件請(qǐng)求頭部的請(qǐng)求用綠色顯示，否則用黑色。

?

2、有陰影線(xiàn)的請(qǐng)求是緩沖模式下的請(qǐng)求，實(shí)心的是流模式下的請(qǐng)求。Fiddler 提供了緩沖（Buffering）和流（Streaming）兩種抓包模式：緩沖模式下，Fiddler 會(huì)在響應(yīng)完成時(shí)才將數(shù)據(jù)返回給應(yīng)用程序（通常是瀏覽器），這種模式下可以控制響應(yīng)，方便地修改響應(yīng)內(nèi)容；流模式下，Fiddler 會(huì)實(shí)時(shí)返回響應(yīng)數(shù)據(jù)給瀏覽器，但沒(méi)辦法控制響應(yīng)。一般使用流模式，瀑布圖會(huì)更真實(shí)一些。這兩種模式可以通過(guò) Fiddler 的工具欄選擇。特別的，通過(guò) Fiddler 的“AutoResponder”功能返回的響應(yīng)，只能是緩沖模式。

開(kāi)啟流模式：流模式比緩沖模式在客戶(hù)端響應(yīng)稍快一些，因?yàn)閿?shù)據(jù)包不會(huì)在fiddler中停留，而是直接同步的代理給瀏覽器（fiddler的工作模式就是本地代理），所以如果不需要Fiddler的“AutoResponse 和 Filters”功能的話(huà)，一般建議使用Stream模式。

?

3、請(qǐng)求條的不同顏色對(duì)應(yīng)著不同元素類(lèi)型的響應(yīng)，根據(jù)響應(yīng)頭的 MIME Type 來(lái)歸類(lèi)。如淺綠色表示圖片類(lèi)型的響應(yīng)；深綠色是 JavaScript；紫色是 CSS；其它都是藍(lán)色。

?

4、Timeline中的黑色豎線(xiàn)，表示的是瀏覽器收到服務(wù)端響應(yīng)的第一個(gè)字節(jié)這一時(shí)刻。這個(gè)時(shí)間受 DNS 解析、建立連接、發(fā)送請(qǐng)求、等待服務(wù)端響應(yīng)等步驟的影響，一般用來(lái)觀察服務(wù)器返回給瀏覽器的數(shù)據(jù)傳輸效率。

?

?

5、請(qǐng)求條后面的圖標(biāo)表示響應(yīng)的某些特征。如軟盤(pán)圖標(biāo)表示這個(gè)響應(yīng)正文從本地獲得，也就是說(shuō)服務(wù)端返回了 304；閃電表示這是 Fiddler 的“AutoResponder”的響應(yīng)；向下的箭頭表示響應(yīng)是 302，需要重定向；紅色感嘆號(hào)說(shuō)明這個(gè)請(qǐng)求有錯(cuò)誤發(fā)生（狀態(tài)碼是 4XX 或 5XX）。

特別的，如果請(qǐng)求條后面有一個(gè)紅色的X，說(shuō)明服務(wù)端響應(yīng)完這個(gè)請(qǐng)求之后，斷開(kāi)了連接。出現(xiàn)這種情況一般有兩種可能：HTTP/1.0 的響應(yīng)中沒(méi)有 Connection: Keep-Alive；或者是 HTTP/1.1 的響應(yīng)中包含了 Connection: close。使用持久連接可以省去建立連接的開(kāi)銷(xiāo)，也可以減小 TCP 慢啟動(dòng)和其它擁塞控制機(jī)制帶來(lái)的影響，總之是好處多多。

?

?

6、請(qǐng)求前面的紅色圓圈表示這個(gè)連接是新建的，綠色表示是復(fù)用的。上面的圓圈表示的是瀏覽器到 Fiddler 的連接，下面的圓圈是 Fiddler 到服務(wù)端的連接。

現(xiàn)在，再看到 Fiddler 的瀑布圖就一目了然了吧。最后再來(lái)兩張瀑布圖自己練習(xí)下：

?

根據(jù)這些小細(xì)節(jié)，前端開(kāi)發(fā)人員可以更容易的觀察頁(yè)面元素加載情況。

轉(zhuǎn)載于:https://www.cnblogs.com/jiangjunyong/p/9797380.html

總結(jié)

以上是生活随笔為你收集整理的fiddler 看懂瀑布图Timeline的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。