雖然一直在用Chrome DevTools，但大多停留在常用的功能和調試上，比如Elements/Network/Sources/Console等主要功能，而對于性能分析/優化相關的Timeline/Profiles一直敬而遠之，深感其門檻高，于是潛心閱讀文檔，以望窺得一二，以解決實際問題。

不同版本的Chrome DevTools差別很大，這篇文章基于最新版的Mac Chrome完成，主要介紹Network/Timeline/Profiles三個方面的內容，為后續的加載優化，性能優化做準備。

系統版本 & Chrome版本

之前寫過一篇關于渲染性能的長文章，有興趣的可以先閱讀閱讀。

Network有哪些功能？

Network主要有5個視窗，分別有不同的功能：
Controls 工具欄：用來控制Network的功能及外觀。
Filters 篩選欄：根據篩選條件篩選請求列表，按住command/ctrl鍵可多選。
Overviews 概覽：資源被加載過來的時間線，如果多條時間線垂直堆疊，表示多個資源被并行加載。
Request Table 請求列表：該視窗列出了所有的資源請求，默認按時間順序排序，點擊某個資源，可以查看更詳細的信息。
Summary 總覽：匯總了請求數量，傳輸數據大小，加載時間等信息。

Network視窗

默認情況下，Request Table 請求列表展示如下信息，當然，在請求列表的表頭右鍵可以配置請求列表顯示的內容。
Name：資源的名稱。
Status：HTTP的狀態碼。
Type：資源的MIME類型。
Initiator：表示請求的上游，即發起者。Parser表示是HTML解析器發起的請求；Redirect表示是HTTP跳轉發起的請求；Script表示是由腳本發起的請求；Other表示是由其他動作發起的請求，比如用戶跳轉或者在導航欄輸入地址等。
Size：請求的大小，包括響應頭和響應體的內容。
Time：請求的時間，從請求開始到請求完全結束。
Timeline：請求的時間線。

右鍵配置請求列表

怎么錄制頁面快照？

選中工具欄的快照圖標，可以錄制頁面快照。

錄制快照

選中某一個快照，在概覽/請求列表出現的黃色豎線，就是該快照被捕捉的真實時間，雙擊快照可以放大。

快照捕獲時間

DOMContentLoaded事件/Load事件的區別？

DOMContentLoaded事件?頁面文檔完全加載并解析完畢之后，會觸發DOMContentLoaded事件，它在兩個地方都有體現：概覽視窗的藍色豎線，總覽視窗的觸發時間。
Load事件?當所有資源加載完成后觸發的，它在三個地方有體現：概覽視窗的紅色豎線，請求列表視窗的紅色豎線，總覽視窗的觸發時間。

DOMContentLoaded/Load事件

結合DOM文檔加載的加載步驟，DOMContentLoaded事件/Load事件觸發時機如下：

解析HTML結構。

加載外部腳本和樣式表文件。

解析并執行腳本代碼。// 部分腳本會阻塞頁面的加載

DOM樹構建完成。//DOMContentLoaded 事件

加載圖片等外部文件。

頁面加載完畢。//load 事件

資源請求明細包含了哪些信息？

點擊請求列表某個請求的名稱，可以查看該請求的詳細信息。詳細信息主要有4個方面：
Headers：資源的HTTP頭
Preview：預覽JSON/image/text資源
Response：資源的HTTP響應頭
Timing：資源的請求生命周期
Cookies：查看HTTP請求頭和響應頭附帶的cookie信息

查看HTTP頭：包含了資源的請求URL，HTTP方法，響應的狀態碼。此外，還列出了HTTP請求頭和響應頭及其值，以及請求參數。

HTTP頭

查看HTTP響應內容：可以清楚的看到HTTP請求的返回結果。

HTTP響應

資源預覽：沒什么好講的，可以查看JSON/image/text等資源。

資源預覽

Cookies：該域名下存儲的cookie信息，其中包含了cookie的特性。

Cookies

Name：cookie的名稱。
Value：cookie的值。
Domain：cookie所屬域名。
Path：cookie所屬URL。
Expire/Max-Age：cookie的存活時間。
Size：cookie的字節大小。
HTTP：表示cookie只能被瀏覽器設置，而且JS不能修改。
Secure：表示cookie只能在安全連接上傳輸。

Timing：查看資源請求的生命周期，包含Queing/Stalled/Request/Response/Request sent/Waiting/Content Download各個階段。

Timeing

如何查看資源請求的上游和下游？

按時shift鍵，鼠標hover在請求上，可以查看請求的上游和下游，如下圖所示，hover在common.js上，可以看到有一個綠色請求、一個紅色請求。其中綠色請求表示common.js的上游請求，即誰觸發了common.js請求，紅色請求表示common.js的下游請求，即common.js又觸發了什么請求。

查看上下游請求

想對請求列表排序？

請求列表的資源默認是按照起始時間排序，最上面的請求最先發起。點擊表頭的Timeline可以重新排序，主要有如下幾個維度。
Timline - Start Time：按請求的發起時間排序。
Timline - Response Time：按請求的響應時間排序。
Timline - End Time：按請求的結束時間排序。
Timline - Total Duration：按請求的總耗時排序，可以快捷的找出耗時最多的資源。
Timline - Latency：按請求的延遲排序，延遲是指請求發起的時間到響應開始的時間，可以快捷的找出請求等待時間最長（TTFB）的資源。

按Timeline排序

想對請求進行篩選？

通過篩選視窗可以對請求進行多維度的篩選，按住Command/Ctrl鍵可以同時選擇多個篩選條件。

多個篩選條件

此外，篩選框可以實現很多定制化的篩選，比如字符串匹配，關鍵詞篩選等，其中關鍵詞篩選主要有如下幾種：
domain：篩選出指定域名的請求，不僅支持自動補全，還支持*匹配。
has-response-header：篩選出包含指定響應頭的請求。
is：通過is:running找出WebSocket請求。
larger-than：篩選出請求大于指定字節大小的請求，其中1000表示1k。
method：篩選出指定HTTP方法的請求，比如GET請求、POST請求等。
mime-type：篩選出指定文件類型的請求。
mixed-content：篩選出混合內容的請求（不懂啥意思）。
scheme：篩選出指定協議的請求，比如scheme:http、scheme:https。
set-cookie-domain：篩選出指定cookie域名屬性的包含Set-Cookie的請求。
set-cookie-name：篩選出指定cookie名稱屬性的包含Set-Cookie的請求。
set-cookie-value：篩選出指定cookie值屬性的包含Set-Cookie的請求。
status-code：篩選出指定HTTP狀態碼的請求。

主流的幾個篩選截圖如下：

domain篩選
has-response-header篩選
larger-than篩選
method篩選
Mime-type篩選
set-cookie-name篩選

如何模擬不同的網絡環境？

Network > Filters 篩選欄下有可以模擬不同網絡環境下的選項，對于模擬測試低網速環境，以及針對低網速環境做加載優化很有幫助。

模擬網絡環境

如何清除緩存和Cookie？

在Network的請求列表視窗中，右鍵也提供了清除Cookie和緩存的選項。

Paste_Image.png

另外，調試模式下，強烈建議勾選Disable cache選項，以避免緩存引起的一些詭異問題。

系列文章
Chrome DevTools 之 Timeline，快捷性能優化工具
Chrome DevTools 之 Profiles，深度性能優化必備

from:?http://www.jianshu.com/p/471950517b07

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Chrome DevTools 之 Network，网络加载分析利器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。