iT邦幫忙

DAY 5
0

30 天學會 Web 前端效能優化系列 第 5

[30 天學會 Web 前端效能優化] 5. 淺談 HTTP 協定

  • 分享至 

  • xImage
  •  

有過網站開發經驗的人,對於 HTTP 應該不陌生,若你不太了解也沒關係,這一篇文章會讓你有個粗略的概念。

HTTP 是一個 client 與 server 間溝通的協定。我們以連接到 Google 為例,請打開你的 Chrome 並至工具 -> 開發人員工具 -> Network 。

點第一項你會看到 HTML Document 的具體訊息。因為截圖無法全部一覽無遺的關係,如果你在自己的電腦上看,在右側面板你會看到「Rquest Headers」以及「Response Headers」。

當我們打開瀏覽器並且在網址列輸入「google.com」按下 Enter 後,瀏覽器會發送 Request 到 Server ,在這邊看到的 Request Headers 裡面的內容便是瀏覽器送到 Server 的資訊,而 Server 收到 Request 後便會根據此 Request 的訊息決定傳回什麼樣的內容給我們(這就是 Backend 在做的事),Server 送回來的 Response 會有 Response Headers ,告知瀏覽器跟這個 Response 相關的訊息。

大家仔細看應該會發現 method 這個欄位,這便是所謂的 HTTP method,你可以看一下 HTTP Spec 了解詳細內容:http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html。

我們以最常見的 GET Request 為例,介紹兩個跟前端效能優化相關的東西。

  1. 瀏覽器會透過 Accept-Encoding 這個 Header 告訴 Server 它支援的壓縮格式,而 Server 回傳的 Response 則會透過 Content-Encoding 這個 Header 告訴瀏覽器這個 Response 是以什麼格式壓縮的。
  2. HTTP 是建構在 TCP 之上的協定。早期的 HTTP 版本每個 Request 都會開啟一個 new socket connection (回想一下之前我們講到關於 TCP 的內容就可以理解這有多麼沒效率了),因此後來 Keep Alive 這個機制就出來了,它讓瀏覽器可以透過單個 socket connection 進行多個 Request ,瀏覽器跟 Server 都會透過 Connection: keep-alive 這個 header 告訴對方自己支援 Keep-Alive 。

上一篇
[30 天學會 Web 前端效能優化] 4. TCP 三向交握
下一篇
[30 天學會 Web 前端效能優化] 6. Life of an HTTP Request
系列文
30 天學會 Web 前端效能優化30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言