February 29, 2020

前端必懂的 HTTP 知識

重點整理 HTTP0.9、1.0、1.1 特色


文 / 西打藍 Siddharam

前言


這應該是前端面試前,必要準備的題目之一。在前公司時,曾負責分享這則題目,今天就把當時分享的內容整理出來。

為網路檔案傳輸而生的 HTTP 0.9


超文字傳輸協定(Hypertext Transfer Protocol, HTTP)是網路上,最普遍被廣泛採用的應用協定之一。它是客戶端和伺服器之間,用來產生最新網頁內容的共通語言。

1991年設計 HTTP 的目標:檔案傳輸功能、能夠對某個超文本檔案庫提出索引搜尋的請求,以及能夠讓客戶端對伺服器進行查詢。

當時的實作如下:

〃客戶端請求一個單一 ASCII 字元字串(character string)
〃客戶端請求是以一個換行字元(CRLF)來作結束。
〃伺服器回應一個 ASCII 字元串(character stream)。
〃伺服器回應一份超文字標記語言(HTML)。
〃連線會在文件傳輸完成後被終止連結。

簡單來說,就是雙方建立連線後,client 向 server 發出請求,server 回應 HTML 檔案。其中的 request 和 response 都是以 ASCII 編碼進行處理的。以下再舉個例子:



$> telnet google.com 80

Connected to 74.125.xxx.xxx

GET /about/

(超文字回應內容)
(關閉連線)



這是使用 telnet 連線到 google.com 的 80 port。Request 僅有短短兩行,包含文件路徑和 GET 方法。Request 連 headers 都沒有,只有一份 HTML 檔案。

整理一下 HTTP 0.9 的特色:

1.「客戶端與伺服器」(client & server)以及「請求與回應」 (request & reponse)關係的協定。
2. 跑在 TCP/IP 連結上的 ASCII 協定。
3. 被設計用來傳輸超文字文件(HTML)。
4. 伺服器和客戶端之間的連線,會在每個請求之後就被關閉。

更多 metadata 的 HTTP 1.0


後來到了 1994 年,Netscape 發行全球第一套瀏覽器 Navigator 1.0,原先 HTTP 0.9 的設計已經不夠用,新型態的網站需要的不只是 HTML,還需要能支援 CSS 以及 圖片等,也需要更多的 metadata。

HTTP 1.0 的特點整理:

1. 回應物件並不僅限於超文字內容,包含 純文字檔案、圖片。
2. 更多的請求標頭訊息,包含 User-Agent、Accept。
3. 更多的回應標頭訊息,HTTP 類型、Content-Type、Content-Length、Expires、Last-Modified。
4. 每次請求都需要建立一次 TCP 連線。

補充標頭訊息意思:

User-Agent:瀏覽器名稱、瀏覽器版本號、渲染引擎、操作系統。
Accept:能夠接受的回應內容類型(Content-Types)。
Expires:指定一個日期/時間,超過該時間則認為此回應已經過期。
Last-Modified:所請求的物件的最後修改日期。

節省更多網路資源的 HTTP 1.1


在 HTTP 1.0 發布的幾年後,1.1 版本就出現了,引進了重要的效能最佳化的技術。

特點整理:

〃持續存活(keepalive)的 HTTP 連線技術。允許連線被重複使用。
〃請求管線處理(request pipelining)以允許同時進行請求處理作業。消除由回應和請求傳播延遲所產生的等候時間。是將多個HTTP請求(request)整批送出的技術,而在傳送過程中不需先等待伺服器的回應。
〃緩存處理,緩存控制策略例如 Entity Etag,If-Unmodified-Since, If-Match, If-None-Match等更多可供選擇的緩存頭來控制緩存策略。
〃錯誤通知的管理,在HTTP1.1中新增了24個錯誤狀態響應碼,如409(Conflict)表示請求的資源與資源的當前狀態發生衝突;410(Gone)表示服務器上的某個資源被永久性的刪除。
名詞解釋:

如果URL上的資源內容改變,一個新的ETag就會被分配。ETag類似於指紋,並且他們能夠被快速地被比較,以確定兩個版本的資源是否相同。
當快取過期之後,可以用If-Modified-Since或是If-None-Match詢問 Server 有沒有新的資源,如果有的話就回傳新的,沒有的話就回傳 Status code 304,代表快取裡面的資源還能繼續沿用。
Content-Encoding :能夠接受的編碼方式列表。
Cookies :由伺服器通過 Set- Cookie 傳送的一個超文字傳輸協定 Cookie。
Connection :該瀏覽器想要優先使用的連接類型。
Catche-Control: Catche 存活的時間(秒)。
Transfer-Encoding :用來將實體安全地傳輸給用戶的編碼形式。目前定義的方法包括:分塊(chunked)、compress、deflate、gzip 和 identity。

後記


那次的分享會,也是準備了很久、精讀了「高效能網站開發指南」這本書才完成簡報的。而 HTTP 2.0 的部分是我最不熟悉的,這次的內文就先不放,因為它和以往的知識連貫不起來。如果要熟悉 HTTP,也建議你實際開 console 來觀察測試唷。


參考書目:高效能網站開發指南




閱讀量




聯絡與合作


有文字採訪、網站開發,或是諮詢需求,皆可至個人網站參考作品,並聯繫 IG

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: frank@siddharam.com

訂閱: