network用F12打開後，出現以下頁面。5個部分分別講解。
1.控制器
2.過濾器
3.時間軸
4.資源內容
5.資源概況
1.控制器
Preserve log:頁面刷新也不會清空請求
Disable cache:停用瀏覽器緩存
Online:有網
Fast 3G、Slow 3G:自定義網速
Offline:離線模擬
2.過濾器
2.1按字符串過濾
輸入例如“png”,支持後綴過濾
輸入例如“/.*\.[cj]s+$/”，支持正則表達式過濾
輸入例如“-main.css”，支持反向匹配過濾
2.2按類型過濾
選擇類型
All:該頁面所有資源文件
XHR:異步請求資源
按住Command（Mac）或Ctrl（Windows、Linux）可支持多個類型
hide Data URLs：CSS圖片等小文件以 BASE64 格式嵌入HTML中，以減少HTTP請求數。
2.3按屬性過濾
- domain:僅顯示來自指定域的資源。您可以使用通配符字符（*）納入多個域
- has-response-header：顯示包含指定HTTP響應標頭的資源
- is：使用 is:running 可以查找 WebSocket 資源，is:from-cache 可查找緩存讀出的資源
- Larget-than：顯示大於指定大小的資源（以字節爲單位）。將值設爲1000等同於設置爲1k
- method：顯示通過指定 HTTP 方法類型檢索的資源
- mime-type：顯示指定 MIME 類型的資源
- mixed-content：顯示所有混合內容資源（mixed-content:all）,或者僅顯示當前顯示的資源（mixed-content:displayed）
- scheme：顯示通過未保護HTTP（scheme:http）或受保護 HTTPS（scheme:https）檢索的資源。
- set-cookie-domain：顯示具有 Set-Cookie 標頭並且 Domain 屬性與指定值匹配的資源。
- set-cookie-name：顯示具有 Set-Cookie 標頭並且名稱與指定值匹配的資源。
- set-cookie-value：顯示具有 Set-Cookie 標頭並且值與指定值匹配的資源。
- status-code：僅顯示 HTTP 狀態代碼與指定代碼匹配的資源。
多屬性間通過空格實現 AND 操作。
3.時間軸
DOMContentLoaded事件會在頁面上DOM完全加載並解析完畢之後觸發，不會等待CSS、圖片、子框架加載完成。
load事件會在頁面上所有DOM、CSS、JS、圖片完全加載完畢之後觸發。
DOMContentLoaded事件在時間軸上用一條藍色豎線標記
load事件同樣會在時間軸上用一條紅色豎線標記
3.1瀏覽器加載流程
- 解析 HTML 結構
- 加載外部腳本和樣式表文件
- 解析並執行腳本代碼 // 部分腳本會阻塞頁面的加載
- DOM 樹構建完成 // DOMContentLoaded 事件
- 加載圖片等外部文件
- 頁面加載完畢 // load事件
4.資源內容
默認時間排序，支持點擊Time、Size等字段切換排序。
Name：資源的名稱
Status：HTTP狀態代碼
Type：請求的資源的MIME類型
Initiator：發起請求的對象或進程。它可能有以下幾種值：
- Parser（解析器）：Chrome的 HTML 解析器發起了請求（鼠標懸停顯示JS腳本）
- Redirect（重定向）：HTTP重定向啓動了請求
- Script（腳本）：腳本啓動了請求
- Other：請求是由其他進程發起的，比如用戶點擊一個鏈接跳轉到另一個頁面或者在地址欄輸入URL地址。
Size：服務器返回的響應大小（包括頭部和包體），可顯示解壓後大小
Time：總持續時間，從請求的開始到接受響應中的最後一個字節
Waterfall：各請求相關活動的直觀分析圖
4.1資源內容操作
按住 shift 鍵懸停請求上，綠色是上游，紅色是下游。
右鍵資源內容
Copy:
Copy Link Address：將請求的網址複製到剪貼板
Copy Response：將響應包體複製到剪貼板
Copy as cURL：以 cURL 命令形式複製請求
Copy All as cURL：以一系列 cURL 命令形式複製所有請求
Copy All as HAR：以 HAR 數據形式複製所有請求
Save all as HAR with content：導出數據爲HAR格式
4.1單個資源內容詳情
點擊單個資源的Name查看詳情
Headers：查看頭部，包括請求頭、響應頭。
Preview：預覽響應正文：查看圖像用
Response：查看響應正文
Timing：時間詳細分佈
Cookies：如果選擇的資源在Request和Response過程中存在Cookies信息，則Cookies標籤會自動顯示出來，在裏面可以查看所有的Cookies信息。
4.2Timing
Queueing：瀏覽器在以下情況下對請求排隊
- 存在更高優先級的請求
- 此源已打開六個 TCP 連接，達到限值，僅適用於 HTTP/1.0 和 HTTP/1.1
- 瀏覽器正在短暫分配磁盤緩存中的空間
Stalled：請求可能會因 Queueing 中描述的任何原因而停止
DNS Lookup：域名解析所耗時間。請求某域名下的資源，瀏覽器需要先通過DNS解析器得到該域名服務器的IP地址。
Proxy Negotiation：瀏覽器正在與代理服務器協商請求
Initial Connection / Connecting 建立連接的時間花費，包含了TCP握手及重試時間。
SSL 完成SSL握手的時間花費。
詳細https的三次握手原理可看這篇。
Request sent：發送請求所消耗的時間
ServiceWorker Preparation：瀏覽器正在啓動Service Worker
Request to ServiceWorker：正在將請求發送到Service Worker
Waiting (Time to first byte (TTFB)) 是最初的網絡請求被髮起到從服務器接收到第一個字節這段時間，它包含了TCP連接時間，發送HTTP請求時間和獲得響應消息第一個字節的時間。TTFB這個部分的時間花費如果超過200ms，則應該考慮對網絡進行性能優化了
Content Download：獲取Response響應數據的時間花費。
Receiving Push：瀏覽器正在通過 HTTP/2 服務器推送接收此響應的數據
Reading Push：瀏覽器正在讀取之前收到的本地數據
假如加載時間較長，可考慮做性能優化。
5.資源概況
顯示總的請求數、數據傳輸量、加載時間信息。
DOMContentLoaded事件會在頁面上DOM完全加載並解析完畢之後觸發，不會等待CSS、圖片、子框架加載完成。以藍色文字顯示確切的時間。
load事件會在頁面上所有DOM、CSS、JS、圖片完全加載完畢之後觸發。以紅色文字顯示確切的時間。
6.設備工具欄
點擊可以切換到不同的終端進行開發模式，可以選擇不同的尺寸比例。
7.其他標籤
- 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文件等。
8.阻止請求
1.按Control+ Shift+ P或 Command+ Shift+ P（Mac）打開命令菜單。
2.鍵入block，選擇“ show request blocking”，然後按Enter。
3.單擊添加模式。
4.鍵入要阻止的請求。
5.單擊添加。
6.重新加載頁面。請注意請求日誌。紅色文本表示資源已被阻止。
7.取消選中啓用請求阻止複選框。
