本文為學習chrome F12_Network的一點記錄，如有不妥之處請各位大神指點，謝謝！
開發者工具面板
最常用的前四個功能模塊如下：
- Elements：查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。
- Console：錄開發者開發過程中的日志信息，且可以作為與JS進行交互的命令行Shell。
- Sources：斷點調試JS。
- Network：從發起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），本文重點記錄該功能模塊。
其他功能模塊：
- Application：記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
- Security：判斷當前網頁是否安全
- Audits：當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。
Network面板
面板功能分類
1.Controls控制Network的外觀和功能
2.Filters控制Requests Table具體顯示哪些內容
3.Overview 顯示獲取到資源的時間軸信息
4.Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息，點擊資源名就可以查看該資源的詳細信息
5.Summary 顯示總的請求數、數據傳輸量、加載時間信息
以下分析各個面板
1.Controls窗格
Controls窗格包括的功能有
- 網絡日志錄制：
默認開啟，會在面板進行網絡連接的信息記錄，關閉后則不會記錄 - 日志清理：
點擊清空當前的網絡連接記錄信息 - 捕獲屏幕：
記錄頁面加載過程中一些時間點的頁面渲染情況 點擊按鈕，重新加載頁面即可捕獲屏幕
雙擊截屏可放大顯示，並可在放大的圖上跳轉上一幀或下一幀
單擊可以查看該幀被捕獲時的請求信息，在Overview上會有一條黃色豎線標記該幀被捕獲的具體時間點
- 過濾器：
可自定義篩選條件，如圖 
- 視圖切換：
顯示詳細信息 
- 顯示時間流：
- 保留日志開關：
重新加載當前頁面的時候，之前的請求資源信息將會保留 - Cache開關：
是否進行緩存。啟動開關時頁面資源不會存入緩存，可從Status欄的狀態碼看文件請求狀態。 - 網絡連接開關：
- 網速閥值：
設置限速模擬各種網絡環境下的不同用戶訪問本頁的情況。
2.請求資源面板
- Name：資源名稱已經URL路徑（main.css）
- Method：Http請求方法
- status：Http狀態碼
- Type：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
- Initiator：標記請求是由哪個對象或者進程發起的（請求源）
- Size：從服務器下載的文件和請求的資源大小，若是從緩存中取得資源則該列會顯示“from cache”
- Time：請求或下載的時間，從發起Request到獲取到Response所用的總時間
- Waterfall：顯示所有網絡請求的可視化瀑布流（時間狀態軸），點擊時間軸，可查看該請求的詳細信息
2.1查看具體資源的詳情
點擊某個資源的Name可查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太一樣
- Headers：該資源的HTTP頭信息
- Preview：根據所選的資源類型（JSON、圖片、文本）顯示相應的預覽
- Response：顯示HTTP的Response信息
- Cookies：顯示資源HTTP的Request和Response過程中的Cookies信息。
- Timing：顯示資源在整個請求生命周期過程中各部分花費的時間
以下分析各個Tab的功能
①Headers.查看資源HTTP頭信息
列出資源的請求URL、HTTP方法、響應狀態碼、請求頭和響應頭以及它們各自的值、請求參數等等。
②Preview.查看資源預覽信息
可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息
③Response.查看資源HTTP的Response信息
可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response相應內容
④Cookies.查看資源Cookies信息
如果選擇的資源在Request和Response過程中存在Cookies信息，則Cookies標簽會自動顯示出來，可查看所有的Cookies信息。
⑤Timing.分析資源在請求的生命周期內各部分時間花費信息
可顯示資源在整個請求生命周期過程中各部分時間花費信息，可能會涉及到如下過程的時間花費情況：
- Queueing：排隊的時間花費。可能由於該請求被渲染引擎認為是優先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的並發請求的最大連接數（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請求時間和獲得響應消息第一個字節的時間。TTFB這個部分的時間花費如果超過200ms，則應該考慮對網絡進行性能優化了
- Content Download：獲取Response響應數據的時間花費
2.2 查看資源的發起者（請求源）和依賴源
通過按住Shfit並且把光標移到資源名稱上，可以查看該資源是由哪個對象或進程發起的（請求源）和對該資源的請求過程中引發了哪些資源（依賴資源）
在該資源的上方第一個標記為綠色的資源就是該資源的發起者（請求源），有可能會有第二個標記為綠色的資源是該資源的發起者的發起者，以此類推
在該資源的下方標記為紅色的資源是該資源的依賴資源。
3.查看DOMContentLoaded和load事件信息
DOMContentLoaded和Load這兩個事件會高亮顯示。
DOMContentLoaded事件會在頁面上DOM完全加載並解析完畢之后觸發，不會等待CSS、圖片、子框架加載完成，並且在Overview上用一條藍色豎線標記，在Summary以藍色文字顯示確切的時間。
load事件會在頁面上所有DOM、CSS、JS、圖片完全加載完畢之后觸發，並且同樣會在Overview和RequestsTable上用一條紅色豎線標記，在Summary也會以紅色文字顯示確切的時間。
本文參考內容有：
https://blog.csdn.net/zengzhenzong/article/details/80446732
https://segmentfault.com/a/1190000010302235