theme: channing-cyan

HTTP協議指南

初步瞭解HTTP

從輸入url到頁面展示的簡略流程圖如下：

Web包含了HTML、CSS、JavaScript、Web APIs等應用。HTTP:簡單可擴充套件；無狀態協議。無狀態伺服器是指一種把每個請求作為與之前任何請求都無關的獨立的事務的伺服器。無狀態的設計簡化了伺服器端的設計，不必動態分配儲存空間以處理進行中的會話。如果客戶端在事務處理中間被中斷了，系統不必為清理伺服器狀態而作出響應。HTTP在網路體系中所處的位置如下所示：

協議分析

協議的發展過程：

TCP連線複用技術：通過將前端多個客戶的HTTP請求複用到後端與伺服器建立的一個TCP連線上。這種技術能夠大大減小伺服器的效能負載，減少與伺服器之間新建TCP連線所帶來的延時，並最大限度的降低客戶端對後端伺服器的併發連線數請求，減少伺服器的資源佔用。

HTTP/1.1的舉例：

請求首行：方法 地址 版本

響應首行：版本 狀態碼 原因短語

常見的方法：

安全的方法：GET HEAD OPTIONS（不會修改伺服器的方法）

冪等方法：同樣的請求被執行一次與連續執行多次的效果是一樣的，伺服器的狀態也是一樣的所有safe的方法都是冪等的。

常見的狀態碼：

• ·200 OK-客戶端請求成功
• ·301-資源（網頁等）被永久轉移到其它URL
• ·302-臨時跳轉
• ·401Unauthorized-請求未經授權
• ·404-請求資源不存在，可能是輸入了錯誤的URL
• ·500-伺服器內部發生了不可預期的錯誤，具體錯誤不明確
• ·504 Gateway Timeout-閘道器或者代理的伺服器無法在規定的時間內獲得想要的響應。

RESTful API

RESTful API：一種API設計風格。
遵循的點：
（1）每一個URI代表一種資源；
（2）客戶端和伺服器之間，傳遞這種資源的某種表現層；
（3）客戶端通過HTTP method，對伺服器端資源進行操作，實現“表現層狀態轉化”。

常用的請求頭

常見的響應頭

快取

強快取:

• Expires，時間戳
• Cache-Control
  • 可快取性
    • public
    • private
    • ·no-cache：協商快取驗證
    • ·no-store：不使用任何快取
  • 到期
    • ·max-age：單位是秒，儲存的最大週期，相對於請求的時間
  • 重新驗證*重新載入
    • ·must-revalidate：一旦資源過期，在成功向原始伺服器驗證之前，不能使用

協商快取

• ·Etag/If-None-Match：資源的特定版本的識別符號，類似於指紋
• ·Last-Modified/If-Modified-Since：最後修改時間

強快取與協商快取運作流程圖如下：

Set-Cookie-response

HTTP/2

專有名詞：

• 幀（frame）：HTTP/2通訊的最小單位，每個幀都包含幀頭，至少也會標識出當前幀所屬的資料流。
• 訊息：與邏輯請求或響應訊息對應的完整的一系列幀。
• 資料流：已建立的連線內的雙向位元組流，可以承載一條或多條訊息。
• 交錯傳送：不需要按照邏輯順序傳送，接收方需要重新組織幀。
• HTTP/2連線都是永久的，而且僅需要每個來源一個連線
• 流控制：阻止傳送方向接收方傳送大量資料的機制，將資源分配給優先順序更高的程式。
• 伺服器推送：智慧分析客戶端的需求，主動推送資訊給接收端。

HTTPS

加密的方法：
對稱加密：加密和解密都是使用同一個金鑰；
非對稱加密，加密和解密需要使用兩個不同的金鑰：公鑰（public key）
和私鑰（private key）

實際應用的時候，採取對稱加密與非對稱加密：

場景分析

今日頭條登入

登入介面：

手機驗證碼登入後：

請求從本地快取取得

• access-control-allow-origin:* 允許所有域名訪問
• content-type:text/css; charset=utf-8 資源型別為CSS
• cache-control:max-age=31536000 有效期為一年的時間

對 Chrome DevTools Header的逐行解釋：

轉自：【瀏覽器】HTTP請求頭格式和響應格式 - vickylinj - 部落格園 (cnblogs.com)

靜態資源部署

靜態資源方案：快取+CDN+檔名hash

CDN（Content Delivery Network）是構建在現有網路基礎之上的智慧虛擬網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。

通過使用者就近性和伺服器負載的判斷，CDN確保內容以一種極為高效的方式為使用者的請求提供服務

檔名hash的作用：當檔案內容有變化時檔名變換/加上版本號，這樣快取中的檔案就無法match，就只能重新請求了，保證每次訪問最新的資源。

options請求：
跨域請求：

• different domains（host不同）
• different subdomains
• different schemes（協議不同）
• different ports
  同域請求：
• implicit port number（埠號不同）

跨域請求解決方案：

1.預請求：獲知服務端是否允許該跨源請求（複雜請求）

2.代理伺服器：同源策略是瀏覽器的安全策略，不是HTTP的。代理伺服器運轉如下：

3.iframe：限制多，不方便

下圖為向目標地址，使用post方法提交資訊

。

上圖中：

content-type:application/x-www-form-urlencoded 表明資訊為form格式

accept:application/json, text/javascript 表明接受json資料

content-type:application/json 為json型別與請求頭對應

set-cookie:n_mh=6VXagNDGr5oWLY33840TRQhM9CQhyaUzqBG19GCTnMU; Path=/; Domain=toutiao.com; Max-Age=10368000; HttpOnly

set-cookie的內容包括:鍵值對；path根路徑；根域名；有效期；HttpOnly用於加強安全性。

鑑權方案

重新整理還可以記住登入資訊：

Session+cookie方案：

JWT方案：

通過單點登入後，頭條網站點選創作跳轉後的網站自動登入。單點登入就是在多個系統中，使用者只需一次登入，各個系統即可感知該使用者已經登入。
單點登入方案圖解：

實際應用

1.網路優化：

2.預解析與預連線：

在當前作用域中，JavaScript程式碼執行之前，瀏覽器首先會預設的把所有帶var和function宣告的變數進行提前的宣告或者定義。在預解析時，變數只會宣告，而函式既會宣告也會定義。

<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

3.穩定性：

重試是保證穩定的有效手段，但要防止加劇惡劣情況。
快取合理使用，作為最後一道防線。

更多

WebSocket

瀏覽器與伺服器進行全雙工通訊的網路技術。HTTP 協議做不到伺服器主動向客戶端推送資訊。與之相對，WebSocket的最大特點就是，伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種。
典型場景：實時性要求高，例如聊天室URL 使用ws://或wss://等開頭

QUIC:Quick UDP Internet Connection

• ·0-RTT建聯（首次建聯除外）。
• ·類似TCP的可靠傳輸。
• ·類似TLS的加密傳輸，支援完美前向安全。
• ·使用者空間的擁塞控制，最新的BBR演算法。
• ·支援h2的基於流的多路複用，但沒有TCP的HOL問題。
• ·前向糾錯FEC。
• ·類似MPTCP的Connection migration。