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
的引數有助於我們對介面的效能有一個比較直觀的感覺~