你知道Chrome Network ，Size 和 Time 為什麼有兩行引數嗎？

Hello，騷年們，當大家歡脫的Debug介面的時候，有沒有在意過Chrome Network裡Size和Time兩項是兩行呢？如下圖箭頭所示：

借這篇文章我們來分析一下它的含義，我們聚焦/api/v1/myaddress/all這個介面

關於Size列

Size有兩行：

• 第一行表示的是資料的傳輸時的大小，例如上圖中的44.3KB，
• 第二行表示的是資料實際的大小441KB

解釋：

因為這個介面返回資料量比較大，所以後端採取了gzip壓縮，從響應頭的Content-Encoding我們也能看出

在伺服器端採取gzip壓縮演算法將將原有441KB壓縮至44.3KB,傳輸大小縮短10倍，大大的提高了介面傳輸的效率。

需要注意的點：

gzip壓縮只會壓縮響應體內容， 所以適用於返回資料量大的時候，如果資料量太小的話，有可能會導致資料傳輸時的大小比實際大小要大(例如加入一些額外的響應頭)

一般例如SpringMVC等Web框架可以指定資料大小到多少時使用gzip壓縮

---

關於Time列

Time有兩行：

• 第一行表示從客戶端傳送請求到服務端返回所有資料所花費的總時間，對於上圖來說就是598ms
• 第二行表示的是從客戶端傳送請求到伺服器端返回第一個位元組所表示的時間，對於上圖來說就是118ms 我們把滑鼠放到最右邊那個藍條會有時間的詳細說明，如下

下圖是這些時間含義的解釋

解釋：

第一行的時間就代表了上圖列的所有專案：例如解析dns，建立連線，等待伺服器返回資料，傳輸資料等

第二行的時間是 總時間 - 資料傳輸的時間

總結

從上面的分析中我們看到 從客戶端請求到伺服器處理結束準備返回資料花了118ms（算蠻久了），但是在進行傳輸資料的時候花費了480ms

每個使用者網路頻寬不一樣，對於網慢的使用者來說，這個體驗可能更差，所以在編寫程式碼的時候，返回的資料量要儘量精簡。

個人覺得理解Chrome Network的引數有助於我們對介面的效能有一個比較直觀的感覺~