今天我們要來看 HTTP 請求列表的欄位所代表的意義

HTTP 請求列表

請先打開開發者工具並切換到網路面版，然後重新載入畫面一次。這時候你的 HTTP 請求列表中應該會有很多個請求，在每個請求的左邊會是請求基本資訊，右邊是載入時間表，稱做 Waterfall，而這個表格是可以使排序的，你可以用滑鼠點擊欄位項目來做排序。而有作用中的排序項目會有一個小箭頭圖示在項目名稱的右邊

除了我們現在看到的欄位之外，當你在欄位項目上按滑鼠左鍵，會出現所有的欄位項目列表，在項目左邊有一個打勾小圖示代表這是已經選用的選項。所以，其實你是可以自己選擇要顯示的項目。下面我們介紹幾個比較常見的項目：

圖 1 : HTTP 請求列表裡有許多欄位選項可以選擇

在看請求列表前，請先確定你的列表是使用完整的列表而不是較精簡的，你可以透過工具列上的按鈕來開關它

• Name: 資源名稱，在資源名稱下方列出來的是這個請求的 URL，因為名稱及 URL 通常都很長，所以會被切掉，你可以點選這個請求來看完整的 HTTP 請求表頭，或是用滑鼠移到請求上，這樣也可以得到完整的請求 URL

• Status: HTTP 請求狀態，這個就是我們常見的各樣 HTTP 請求回傳後的狀態，常見的有 200, 304 404 等，在 MDN 上有完整列表，如果請求失敗，這裡會有失敗的訊息，而整個請求也會用紅色來表示

• Protocol: 使用的HTTP 協定，常見的有 http/1.1, h2 (HTTP2) 等等

• Type: 請求資源的類型，會有 xhr (Ajax 請求), document (HTML), stylesheet (CSS), script (JS) 等等

• Size: 請求大小，請求大小會有兩個，在上面的是傳輸大小，下面的是原始大小，如果你的一些資源有做 gzip 在這裡就可以明顯的看到原始大小很大，但是傳輸尺寸是小很多的，這裡也可能會出現像是 form memory cache 或是 from disk cache 這類的訊息，也就是這個請求其實沒有下載任何東西，它是去快取拿資料

• Time: 下載所花的時間，跟 Size 一樣分成兩個，對應到我們剛剛所討論的不同大小

• Method: HTTP 請求的方法，較常見的就是 GET, POST 等

• Content-Encoding: 內容編碼，如果你有使用像是 gzip 這種壓縮格式，就可以在這裡看到

• Priority: 下載優先順序，通常較高的就是 HTML，然後才是 CSS, JS 最後是像圖片這類的資源

上面列出來的就是常見的幾個請求項目，接下來我們一起來看一下 Waterfall　吧

Waterfall

Waterfall 其實跟昨天講的總覽很像，只是它是列出這個 HTTP 請求本身的開始及結束時間，當你的滑鼠移到請求的 Waterfall 上時，可以看到更清楚的資訊，這些資訊我們明天會跟請求的詳細內容一起說明。再來，你可以看到整個 Waterfall 會有兩條不同顏色的線 (在總覽也有，昨天忘了說 XD)，一條是藍色的那是 DOMContentLoaded 事件的時間點，也就是你的 DOM 已經解析完成的時間，但是像是圖片, CSS, 還沒有。後面的一條是紅色的 Load 事件，代表資源包含圖片, CSS 等也都載完了的事件。

圖 2 : Waterfall 裡列出資源載入的時間點

小結

今天我們一起看了 HTTP 請求列表的欄位項目各自代表的意義還有簡單的看了一下 Waterfall, 明天我們會一起來討論每個請求的細節，包含請求表頭, 內容還有請求所花的時間 (也就是今天沒有講的 Waterfall 內容)，那我們就明天見吧！