控制台了解認知---network

使用Network(網絡)面板評估網站的網絡性能。

Network(網絡)面板記錄在頁面上有關每個網絡操作的信息，包括詳細的時序數據，HTTP請求和響應頭，Cookie等。

Network(網絡)面板概覽

網絡面板包含5個窗格：

1. Controls (控件) : 使用這些選項可以控制 Network (網絡)面板的外觀和功能。
2. Filters (過濾器) : 使用這些選項可以控制在請求列表中顯示哪些資源。提示：按住 Cmd （Mac）或 Ctrl （Window / Linux），然后點擊過濾器可以同時選擇多個過濾器。
3. Overview (概覽) : 這個圖表顯示檢索資源的時間軸。如果您看到多個垂直堆疊的欄，這意味着這些資源被同時檢索。
4. Requests Table (請求列表) : 此列表列出了檢索的每個資源。默認情況下，此表按時間順序排序，也就是最早的資源在頂部。單擊資源名稱可以獲得更多信息。提示：右鍵單擊列表的任何標題欄可以以添加或刪除信息列。
5. Summary (概要) : 概要窗格告訴您請求的總數，傳輸的數據量，和加載時間。

默認情況下，請求表列顯示以下列。您可以添加和刪除列（愚人碼頭注：右鍵單擊列表的任何標題欄可以以添加或刪除信息列）。

• Name (名稱) : 資源的名稱。
• Status (狀態) : HTTP狀態代碼。
• Type (類型) : 請求的資源的MIME類型。
• Initiator (發起人) : 發起請求的對象或進程。它可能有以下幾種值：
  • Parser (解析器) : Chrome的HTML解析器發起了請求。
  • Redirect (重定向) : HTTP重定向啟動了請求。
  • Script (腳本) : 腳本啟動了請求。
  • Other (其他) : 一些其他進程或動作發起請求，例如用戶點擊鏈接跳轉到頁面，或在地址欄中輸入網址。
• Size (尺寸) : 響應頭的大小（通常是幾百字節）加上響應數據，由服務器提供。
• Time (時間) : 總持續時間，從請求的開始到接收響應中的最后一個字節。
• Timeline (時間軸) : Timeline 列顯示所有網絡請求的視覺瀑布。點擊此列的標題欄會顯示其他排序字段的菜單。

 

 

• Preserve log (保存日志) : 保留打印出來的日志。
• Disable cache (禁用緩存) : 防止緩存過多導致頁面卡頓。
• online ： 有線的在線的
• Fase 3G ： 快速3G
• Slow 3G ： 慢速3G
• Offline ：無網狀態
• Add：自己添加去吧
• 上箭頭：上傳
• 下箭頭：下載

查看DOMContentLoaded和load事件信息

Network(網絡)面板會高亮顯示兩個事件：DOMContentLoaded和load。

當頁面的初始的標記被解析完時，會觸發DOMContentLoaded。 它在Network(網絡)面板上的兩個位置顯示：

• 在 Overview (概覽)窗格中的藍色垂直線表示這個事件。
• 在 Summary (概要)窗格中，您可以查看事件的確切時間。

當頁面完全加載時觸發load事件。 它顯示在三個地方：

• 在 Overview (概覽)窗格的紅色垂直線表示這個事件。
• 在 Requests Table (請求列表)中的紅色垂直線也表示這個事件。
• 在 Summary (概要)中，您可以查看改事件的確切時間。

查看單個資源的詳細信息

點擊資源名稱（在Requests Table(請求列表)的Name(名稱)列中）可以查看該資源的更多信息。

可用的標簽頁取決於您選擇的資源類型，但以下四個標簽頁是最常見的：

• Headers (標頭) : 與資源相關的HTTP頭。
• Preview (預覽) : 預覽JSON，圖片和文字資源。
• Response (響應) : HTTP響應數據（如果有）。
• Timing (時序) : 資源的請求生命周期的明細分類。

查看網絡時序

點擊Timing(時序)選項卡可查看單個資源的請求生命周期的明細分類。

生命周期顯示在以下類別中花費的時間：

• Queuing (排隊)排隊時間
• Stalled (停滯)發送請求之前等待的時間
• 如果適用： DNS lookup (DNS查找)， initial connection (初始連接)， SSL handshake (SSL握手)
• Request sent (請求發送)發出網絡請求所花費的時間
• Waiting (等待)（到開始下載第一個字節的時間（TTFB））等待初始響應所花費的時間
• Content Download (內容下載)接收響應數據所花費的時間

您也可以將鼠標懸停在資源的Timeline(時間軸)圖表上，查看此相同的信息。

相關指南：

Queuing(排隊)

如果一個請求排隊，則表明：

• 請求被渲染引擎推遲，因為它被認為比關鍵資源（如腳本/樣式）的優先級低。這經常發生在 images（圖像） 上。
• 這個請求被擱置，在等待一個即將被釋放的不可用的TCP socket。
• 這個請求被擱置，因為瀏覽器限制。在HTTP 1協議中，每個源上只能有 6個TCP連接
• 正在生成磁盤緩存條目（通常非常快）。

Stalled/Blocking (停止/阻塞)

發送請求之前等待的時間。它可能因為進入隊列的任意原因而被阻塞。這個時間包括代理協商的時間。

Proxy Negotiation (代理協商)

與代理服務器連接協商花費的時間。

DNS Lookup (DNS查找)

執行DNS查找所用的時間。 頁面上的每個新域都需要完整的往返(roundtrip)才能進行DNS查找。

Initial Connection / Connecting (初始連接/連接)

建立連接所需的時間， 包括TCP握手/重試和協商SSL。

SSL

完成SSL握手所用的時間。

Request Sent / Sending (請求已發送/正在發送)

發出網絡請求所花費的時間。 通常是幾分之一毫秒。

Waiting (TTFB) (等待)

等待初始響應所花費的時間，也稱為`Time To First Byte`(接收到第一個字節所花費的時間)。這個時間除了等待服務器傳遞響應所花費的時間之外，還捕獲到服務器發送數據的延遲時間。

Content Download / Downloading (內容下載/下載)

接收響應數據所花費的時間。(愚人碼頭注：從接收到第一個字節開始，到下載完最后一個字節結束)

排隊或停止阻塞

最常見的問題是很多個請求排隊或被阻塞。這表示從單個客戶端檢索的資源太多。在HTTP 1.0/1.1連接協議中，Chrome限制每個域名最多執行6個TCP連接。如果您一次請求十二個資源，前6個將開始，后6個將排隊。一旦其中一個請求完成，隊列中的第一個請求項目將開始其請求過程。

要解決傳統HTTP 1的此問題，您需要實現分域。即用多個子域名提供服務資源，將資源拆分到多個子域中，均勻分配。

上面說的修復HTTP 1連接數問題，不適用於HTTP 2連接，反而有害。如果您已部署HTTP 2，不要對您的資源進行域划分，因為它會影響HTTP 2的工作原理。在HTTP 2中，TCP連接多路復用連接的。這消除了HTTP 1的6個連接限制，並且可以通過單個連接同時傳輸多個資源。

接收到第一個字節的時間很慢

正如我們所看到的，很多綠色。

TTFB就是等待第一個響應字節的時間，建議在200ms以下，以下情況可能會導致高TTFB（延遲）:

1. 客戶端和服務器之間的網絡條件差，
2. 要么，服務器端程序響應很慢。

為了解決高TTFB，首先去除盡可能多的網絡連接。理想情況下，在本地托管應用程序（部署在本地），並查看是否仍有一個大的TTFB。如果有，那么需要優化應用程序針的響應速度。這可能意味着優化數據庫查詢，為內容的某些部分實現高速緩存，或修改Web服務器配置。后端可能很慢的原因有很多。您需要對您的程序進行研究，並找出不符合您預期的內容。

如果本地TTFB低，那么是您的客戶端和服務器之間的網絡問題。網絡傳輸可能被很多種事情干擾阻礙。在客戶端和服務器之間有很多點，每個都有自己的連接限制，可能會導致問題。測試減少這種情況的最簡單的方法是將您的應用程序放在另一台主機上，看看TTFB是否改進。

加載緩慢

正如我們所看到的，很多藍色。

如果您看到Content Download(內容下載)階段花費了很多時間，提高服務響應速度、並行下載等優化措施幫助都不大。 主要的解決方案是發送更少的字節。（比如，下載一張高質量的大圖，可能是幾兆，這個時候你需要優化圖片。）

查看HTTP頭信息

點擊Headers顯示該資源詳細的頭信息。

Headers(頭信息)標簽頁顯示資源的請求URL，HTTP方法，和響應狀態代碼。 另外， 它列出HTTP響應和請求頭信息及他們對應的值，和任何查詢字符串參數。

您可以通過點擊view source(視圖源)或view parsed(視圖解析)鏈接查看在源或解析格式中的響應標頭，請求標頭，或查詢字符串參數。

您還可以通過點擊query string parameters(查詢字符串參數)旁邊的view URL encoded(查看URL編碼)或view decoded(查看解碼)鏈接，查看URL編碼或解碼格式的query string parameters(查詢字符串參數)。

預覽某個資源

點擊Preview(預覽)標簽頁可以查看某些資源的預覽。Preview(預覽)標簽頁可能顯示或不顯示任何有用的信息， 具體取決於您選擇查看的資源類型。

查看HTTP響應內容

點擊Response(響應)標簽頁可以查看該資源未格式化的HTTP響應內容。Response(響應)標簽頁可能包含或可能不包含任何有用的信息， 具體取決於您選擇查看的資源類型。

查看cookies

點擊Cookies標簽頁可以查看資源的HTTP請求和響應頭信息中傳輸的Cookie列表。此標簽頁僅在傳輸Cookie時可用。

以下是Cookie列表中每個列的說明：

• Name (名稱) : Cookie的名稱。
• Value (值) : Cookie的值。
• Domain (域) : Cookie所屬的域。
• Path (路徑) : Cookie來自的網址路徑。
• Expires / Max-Age (到期/最大可用時間) : Cookie的有效期或 max-age 屬性的值。
• Size (尺寸) : Cookie的大小（以字節為單位）。
• HTTP : 表示Cookie只能由瀏覽器在HTTP請求中設置，且無法使用JavaScript訪問。
• Secure (安全) : 此屬性的存在表示Cookie只能通過安全連接傳輸(愚人碼頭注：HTTPS協議傳輸)。

查看WebSocket幀

點擊Frames(幀)標簽頁可以查看WebSocket連接信息。此標簽頁僅在所選資源由WebSocket連接發起時可見。

下面的列表描述了Frames(幀)標簽頁中表格中的每一列：

• Data (數據) : 消息承載的內容。如果消息是純文本，則會顯示在此處。 如果是二進制操作碼，這個字段顯示操作碼的名稱和代碼。支持以下操作碼：
  • Continuation Frame
  • Binary Frame
  • Connection Close Frame
  • Ping Frame
  • Pong Frame
• Length (長度) :消息承載內容的長度（以字節為單位）。
• Time (時間) :創建消息時的時間戳。

消息根據其類型進行顏色編碼：

• 發出的文本消息是淺綠色的。
• 收到的文本消息是白色的。
• WebSocket操作碼是淺黃色。
• 錯誤是淺紅色的。

有關實時的注意事項：

• 要在消息到達后刷新 Frames (幀)列表，請點擊左側的資源名稱。
• Frames (幀)列表只保留最近的100條WebSocket消息。

排序請求

默認情況下，Requests Table(請求列表)中的資源按每個請求的開始時間排序，最早開始的請求在最上面。

點擊Requests Table(請求列表)中列的標題欄，可以按照該標題下的每個資源的值對列表進行排序。再次單擊相同的標題欄可將排序順序更改為升序或降序。

Timeline時間軸列與其他列不同。當點擊時，它顯示一個排序字段的菜單：

• Timeline (時間軸) : 按每個網絡請求的開始時間排序。這是默認排序，它與 Start Time (開始時間)選項相同。
• Start Time (開始時間) : 按每個網絡請求的開始時間排序（與按 Timeline (時間軸) 選項排序相同）。
• Response Time (響應時間) : 按每個請求的響應時間排序。
• End Time (完成時間/結束時間) : 按每個請求完成的時間排序。
• Duration (持續時間) : 按每個請求的總時間排序。選擇這個過濾器可以確定哪個資源需要加載最長的時間。
• Latency (延遲時間) : 按請求開始和響應開始之間的時間排序。選擇這個過濾器可以確定哪個資源下載第一個字節（TTFB）的延遲時間最長。

過濾請求

Network(網絡)面板提供了許多方法來過濾顯示哪些資源。點擊filters(過濾器)按鈕（）以隱藏或顯示Filters(過濾器)窗格。

使用內容類型按鈕來顯示或隱藏所選內容類型的資源。

注意:按住Cmd(Mac) 或者Ctrl(Windows/Linux) ，然后點擊過濾器可以同時啟用多個過濾器。

在filter(過濾器)文本字段輸入框的過濾功能非常強大，輸入一個字符串后，Network(網絡)面板就只顯示資源名字和它匹配的請求。

filter(過濾器)文本字段還支持各種關鍵字，使您可以通過各種屬性對資源進行排序，例如按照文件大小排序使用larger-than關鍵字。

下面的列表描述了所有關鍵字。

• domain (域) : 僅顯示來自指定域的資源。您可以使用通配符（ * ）來包括多個域。例如， *.com 顯示以 .com 結尾的所有域名中的資源。 DevTools會在自動完成下拉菜單中自動填充它遇到的所有域。
• has-response-header (響應頭信息) : 顯示包含指定HTTP響應頭信息的資源。 DevTools會在自動完成下拉菜單中自動填充它遇到的所有響應頭。
• is : 使用 is:running 過濾出 WebSocket 資源。
• larger-than (大於) : 顯示大於指定大小的資源（以字節為單位）。設置值 1000 等效於設置值 1k 。
• method (方法) : 顯示通過指定的HTTP方法類型檢索的資源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
• mime-type (mime類型) : 顯示指定MIME類型的資源。 DevTools使用它遇到的所有MIME類型填充下拉列表。
• mixed-content (混合內容) : 顯示所有混合內容資源（ mixed-content:all ）或僅顯示當前顯示的內容（ mixed-content:displayed ）。
• scheme (協議) : 顯示通過不受保護的HTTP（ scheme:http ）或受保護的HTTPS（ scheme:https ）檢索的資源。
• set-cookie-domain (cookie域) : 顯示具有 Set-Cookie 頭,並且其Domain屬性與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有Cookie域。
• set-cookie-name (cookie名) : 顯示具有 Set-Cookie 頭,並且名稱與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有Cookie名。
• set-cookie-value (cookie值) : 顯示具有 Set-Cookie 頭,並且值與指定值匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有cookie值。
• status-code (狀態碼) : 僅顯示其HTTP狀態代碼與指定代碼匹配的資源。DevTools會在自動完成下拉菜單中自動填充它遇到的所有狀態碼。

上面的某些關鍵字提到了自動填充下拉菜單。要觸發自動完成菜單，鍵入關鍵字后跟一個冒號。例如，在以下截圖中，輸入domain:觸發了自動完成下拉菜單。

復制，保存和清除網絡信息

右鍵單擊Requests Table(請求列表)以復制，保存或刪除網絡信息。一些選項是上下文相關的，所以如果你想在單個資源上操作，您需要右鍵單擊該資源行。下面的列表描述了每個選項。

• Copy Response (復制響應) : 將所選資源的HTTP響應復制到系統剪貼板。
• Copy as cURL (復制為cURL) : 將所選資源的網絡請求作為 cURL 命令字符串復制到系統剪貼板。 請參閱將 復制請求為cURL命令 。
• Copy All as HAR (全部復制為HAR) : 將所有資源復制到系統剪貼板作為 HAR 數據。 HAR文件包含描述網絡“瀑布”的JSON數據結構。一些 第三方 工具 可以使用HAR文件中的數據重建網絡瀑布。有關詳細信息，請參閱 Web性能強大工具：HTTP歸檔（HAR） 。
• Save as HAR with Content (另存為帶內容的HAR) : 將所有網絡數據與每個頁面資源一起保存到HAR文件中。 二進制資源（包括圖像）被編碼為Base64編碼文本。
• Clear Browser Cache (清除瀏覽器緩存) : 清除瀏覽器高速緩存。 提示 ：您也可以從 Network Conditions(網絡條件) 抽屜式窗格中啟用或禁用瀏覽器緩存。
• Clear Browser Cookies (清除瀏覽器Cookie) : 清除瀏覽器的Cookie。
• Open in Sources Panel (在源文件面板中打開) : 在 Sources (源文件)面板中打開選定的資源。
• Open Link in New Tab (在新標簽頁中打開鏈接) : 在新標簽頁中打開所選資源。您還可以在 Requests Table (請求列表)中雙擊資源名稱。
• Copy Link Address (復制鏈接地址) : 將資源URL復制到系統剪貼板。
• Save (保存) : 保存所選的文本資源。僅顯示在文本資源上。
• Replay XHR (重新發送XHR) : 重新發送所選的 XMLHTTPRequest 。僅顯示在XHR資源上。

將一個或所有請求復制為cURL命令

cURL是用於進行HTTP處理的命令行工具。

右鍵單擊Requests Table(請求列表)中的資源，將鼠標懸停在Copy(復制)上，然后選擇Copy as cURL(復制為cURL)，可以拷貝一個cURL請求字符串，只要該資源已經被Network(網絡)面板檢測到。

選擇Copy All as cURL(全部復制為cURL)可以復制Network(網絡)面板檢測到的所有資源的cURL請求字符串。

復制全部時，將忽略過濾（例如，如果您過濾Network(網絡)面板，來僅顯示CSS資源，然后按Copy All as cURL(全部復制為cURL)，你會得到所有檢測到的資源，而不只有CSS）。