1. 程式人生 > >使用 Fiddler 分析網頁載入過程

使用 Fiddler 分析網頁載入過程

 Fiddler 是一個http除錯代理,它能夠記錄所有的你電腦和網際網路之間的http通訊,Fiddler 可以也可以讓你檢查所有的http通訊,設定斷點,以及Fiddler 所有的“進出”的資料(指cookie,html,js,css等檔案)

安裝好 Fiddler 並開啟該軟體,然後 Ie 瀏覽器的所有訪問請求都將被 Fiddler 截獲,我們會根據截獲的內容進行分析  以下為全新訪問(瀏覽器沒有任何快取資料) http://oneoo.com 所獲得的截圖:

 

  軟體介面上的左欄為開啟該頁面所產生的全部訪問請求,其中包括請求次序、請求的返回狀態、請求型別、所發請求的域名和地址等簡要資訊。右欄為訪問請求的詳細資料,包括請求的完成時間和瀏覽器傳送請求的Header資訊和伺服器返回的詳細資訊。

  全選左欄的請求記錄,並在右欄切換到 TimeLine 分析整個頁面載入流程中各個請求的消耗時間:

 

   選擇第一個請求和最後一個請求,可獲得整個頁面載入所消耗的總體時間(右圖)。從左圖的條形圖表中還可以分別出哪些請求耗時最多,從而對頁面的訪問進行訪問速度優化(如果是第三方網站的服務呼叫,可以考慮去除)。而狀態列上可檢視到整個頁面所需要傳送的請求總數。

  分析得出,我的部落格首頁總共有 84 個請求,其中兩個比較大的圖片耗時最多,全新的訪客開啟頁面需要 9 秒時間。

  現在我們點Edit選單Remove -> All sessions 清空記錄,開始分析普通訪客的載入過程

 

   左圖為使用者點選連結訪問,因剛才的訪問已經讓瀏覽器把大量的資料快取下來,所以需要傳送的請求數量很少,才5個,總耗時1秒。而右圖為使用者點選重新整理按鈕訪問頁面,因為是重新整理訪問,瀏覽器不會使用快取資料,但會發送請求詢問頁面伺服器瀏覽器上的快取資料是否過期,所以會發送 84個請求。因為這些請求比較特殊,如果瀏覽器上的快取資料跟頁面伺服器上的內容一致,那麼伺服器會返回 304 狀態,而不需要重新下載內容的,所以總體耗時是 5 秒。比起沒有快取的全新訪問要快一倍時間。

  綜合以上的全新訪問、帶快取點選訪問和帶快取重新整理訪問,三種形式測試得出的資料,可以看到瀏覽器快取在加快頁面訪問速度上起到非常大的作用。作為網站開發員應該充分考慮這方面的細節調整。

  如果你覺得自己的部落格開啟速度慢,也可以試試用 Fiddler 來測試一下,看看到底是慢在哪個地方,做出優化  通常國外的統計程式碼都比較拖時間的~