Chrome開發者工具詳解(2)-Network面板
註： 這一篇主要講解面板Network，參考了Google的相關文檔，主要用於公司內部技術分享。
Chrome開發者工具面板
面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板。
這些按鈕的功能點如下：
- Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面得到反饋。
- Console:記錄開發者開發過程中的日誌信息，且可以作為與JS進行交互的命令行Shell。
- Sources:斷點調試JS。
- Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
- Timeline:記錄並分析在網站的生命周期內所發生的各類事件，以此可以提高網頁的運行時間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
- Application:記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
- Security:判斷當前網頁是否安全。
- Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。
Network面板
概述
Network面板可以記錄頁面上的網絡請求的詳情信息，從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間、Request和Response等），可以根據這個進行網絡性能優化。
我把Google官方網站上介紹Network面板的圖貼到這裏，該面板主要包括5大塊窗格(Pane)：
- Controls 控制Network的外觀和功能。
- Filters 控制Requests Table具體顯示哪些內容。
- Overview 顯示獲取到資源的時間軸信息。
- Requests Table 按資源獲取的前後順序顯示所有獲取到的資源信息，點擊資源名可以查看該資源的詳細信息。
- Summary 顯示總的請求數、數據傳輸量、加載時間信息。
其中 Requests Table 顯示如下信息列：
- Name 資源名稱，點擊名稱可以查看資源的詳情情況，包括
Headers、Preview、Response、Cookies、Timing。 - Status HTTP狀態碼。
- Type 請求的資源MIME類型。
- Initiator 標記請求是由哪個對象或進程發起的（請求源）。
- Parser： 請求由Chrome的HTML解析器時發起的。
- Redirect：請求是由HTTP頁面重定向發起的。
- Script：請求是由Script腳本發起的。
- Other：請求是由其他進程發起的，比如用戶點擊一個鏈接跳轉到另一個頁面或者在地址欄輸入URL地址。
- Size 從服務器下載的文件和請求的資源大小。如果是從緩存中取得的資源則該列會顯示(from cache)
- Time 請求或下載的時間，從發起Request到獲取到Response所用的總時間。
- Timeline 顯示所有網絡請求的可視化瀑布流(時間狀態軸)，點擊時間軸，可以查看該請求的詳細信息，點擊列頭則可以根據指定的字段可以排序。
捕獲屏幕
Controls窗格包括的功能有網絡日誌錄制、日誌清理、捕獲屏幕、過濾器，視圖切換、保留日誌開關、Cache開關、網絡連接開關、網速閥值。
以捕獲屏幕為例，點擊攝像機按鈕（捕獲屏幕），重新加載頁面即可捕獲屏幕。
雙擊其中的截屏可以放大顯示，在放大的圖下方可以點擊跳轉到上一幀或者下一幀。
單擊則可以查看該幀被捕獲時的網絡請求信息，並且在Overview上會有一條黃色豎線以標記該幀被捕獲的具體時間點。
查看DOMContentLoaded和load事件信息
DOMContentLoaded和load這兩個事件會高亮顯示。
DOMContentLoaded事件會在頁面上DOM完全加載並解析完畢之後觸發，不會等待CSS、圖片、子框架加載完成。
load事件會在頁面上所有DOM、CSS、JS、圖片完全加載完畢之後觸發。
DOMContentLoaded事件在Overview上用一條藍色豎線標記，並且在Summary以藍色文字顯示確切的時間。
load事件同樣會在Overview和Requests Table上用一條紅色豎線標記，在Summary也會以紅色文字顯示確切的時間。
查看具體資源的詳情
通過點擊某個資源的Name可以查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太一樣，可能包括如下Tab信息：
- Headers 該資源的HTTP頭信息。
- Preview 根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
- Response 顯示HTTP的Response信息。
- Cookies 顯示資源HTTP的Request和Response過程中的Cookies信息。
- Timing 顯示資源在整個請求生命周期過程中各部分花費的時間。
針對上面4個Tab進行詳細講解一下各個功能：
① 查看資源HTTP頭信息
在Headers標簽裏面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。
② 查看資源預覽信息
在Preview標簽裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息。下圖顯示的是當選擇的資源是JSON格式時的預覽信息。
③ 查看資源HTTP的Response信息
在Response標簽裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內容。下圖顯示的是當選擇的資源是CSS格式時的響應內容。
④ 查看資源Cookies信息
如果選擇的資源在Request和Response過程中存在Cookies信息，則Cookies標簽會自動顯示出來，在裏面可以查看所有的Cookies信息。
⑤ 分析資源在請求的生命周期內各部分時間花費信息
在Timing標簽中可以顯示資源在整個請求生命周期過程中各部分時間花費信息，可能會涉及到如下過程的時間花費情況：
- Queuing 排隊的時間花費。可能由於該請求被渲染引擎認為是優先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的並發請求的最大連接數（Chrome的最大並發連接數為6）.
- Stalled 從HTTP連接建立到請求能夠被發出送出去(真正傳輸數據)之間的時間花費。包含用於處理代理的時間，如果有已經建立好的連接，這個時間還包括等待已建立連接被復用的時間。
- Proxy Negotiation 與代理服務器連接的時間花費。
- DNS Lookup 執行DNS查詢的時間。網頁上每一個新的域名都要經過一個DNS查詢。第二次訪問瀏覽器有緩存的話，則這個時間為0。
- Initial Connection / Connecting 建立連接的時間花費，包含了TCP握手及重試時間。
- SSL 完成SSL握手的時間花費。
- Request sent 發起請求的時間。
- Waiting (Time to first byte (TTFB)) 是最初的網絡請求被發起到從服務器接收到第一個字節這段時間，它包含了TCP連接時間，發送HTTP請求時間和獲得響應消息第一個字節的時間。
- Content Download 獲取Response響應數據的時間花費。
TTFB這個部分的時間花費如果超過200ms，則應該考慮對網絡進行性能優化了，可以參見網絡性能優化方案及裏面的相關參考文檔。
查看資源的發起者(請求源)和依賴項
通過按住Shift並且把光標移到資源名稱上，可以查看該資源是由哪個對象或進程發起的（請求源）和對該資源的請求過程中引發了哪些資源（依賴資源）。
在該資源的上方第一個標記為綠色的資源就是該資源的發起者（請求源），有可能會有第二個標記為綠色的資源是該資源的發起者的發起者，以此類推。
在該資源的下方標記為紅色的資源是該資源的依賴資源。
參考資料
- Measure Resource Loading Times
- Understanding Resource Timing
個人博客
我的個人博客
https://www.cnblogs.com/LibraThinker/p/5981346.html
https://segmentfault.com/a/1190000010302235
Chrome開發者工具詳解(2)-Network面板