Chrome瀏覽器Network面板http請求時間分析

Chrome瀏覽器開發者工具Network視窗下，可以查看下載各元件所需的具體時間

根據上表進行簡要分析－

Stalled（阻塞）

　　瀏覽器對同一個主機網域的並發連線數有限制，因此如果目前的連線數已經超過上限，那麼其餘請求就會被阻塞，等待新的可用連線；此外腳本也會阻塞其他元件的下載；

　　最佳化措施：

　　1、將資源合理分佈到多台主機上，可以提高並發數，但是增加並行下載數量也會增大開銷，這取決於頻寬和CPU速度，過多的並行下載會降低效能；

　　2、腳本置於頁面底部；

 

DNS Lookup（網域解析）

　　請求某網域下的資源，瀏覽器需要先透過DNS解析器得到該網域名稱伺服器的IP位址。在DNS查找完成之前，瀏覽器不能從主機名稱下載到任何東西。

　　最佳化措施：

　　1、利用DNS快取（設定TTL時間）；

　　2、利用Connection:keep-alive特性建立持久連接，可以在當前連接上進行多個請求，無需再進行域名解析；

 

Initial connection（初始化連接）

　　TCP建立連線的三次握手時間

 

SSL（包含於HTTPS連接中）

　　http是超文本傳輸協議，以明文方式發送內容，不提供任何方式的資料加密，如果被不法分子截取瀏覽器和伺服器之間的傳輸報文，會獲取其中的資訊。

　　https 是安全通訊端層超文本傳輸協議，就是在HTTP的基礎上加入了SSL協議，SSL依靠憑證來驗證伺服器的身份，並為瀏覽器和伺服器之間的通訊加密。

　　因此建立HTTPS連接的時間相當於三次握手的時間+SSL時間。

 

Request sent（發送請求）

　　發送HTTP請求的時間（從第一個bit到最後一個bit）

　　最佳化措施：

　　1、減少HTTP請求，可以使用CSS Sprites、內聯圖片、合併腳本和樣式表等；

　　2、對不常變化的組件添加長久的Expires頭（相當於設定久遠的過期時間），在後續的頁面瀏覽中可以避免不必要的HTTP請求；

 

Waiting（等待回應）

　　通常是耗費時間最長的。從發送請求到收到回應之間的空隙，會受到線路、伺服器距離等因素的影響。

　　最佳化措施：

　　1、使用CDN，將使用者的存取指向距離最近的工作正常的快取伺服器上，由快取伺服器直接回應使用者請求，提高回應速度；

 

Content Download（下載）

　　下載HTTP響應的時間（包含頭部和響應體）

　　最佳化措施：

🎜

　　1、透過條件Get請求，對比If-Modified-Since和Last-Modified時間，決定是否使用快取中的元件，伺服器會傳回「304 Not Modified」狀態碼，減少回應的大小；

　　2、移除重複腳本，精簡和壓縮程式碼，如借助自動化建置工具grunt、gulp等；

　　3、壓縮回應內容，伺服器端啟用gzip壓縮，可以減少下載時間；