文章目錄

• 1 HTTP基礎
• • 1.1 http發(fā)展歷程
  • 1.2 發(fā)起一次請求瀏覽器端經歷的過程
  • 1.3 什么是跨域
  • 1.4 數據協(xié)商：Accept 和Content
  • 1.5 其他
• 2. 關于瀏覽器緩存那些事
• • 2.1 cache-control 緩存策略
• 3. cookie

1 HTTP基礎

1.1 http發(fā)展歷程

HTTP1.1的特點：

• 持久連接。 即在一次TCP連接中多次發(fā)送http請求（對應返回頭里的Connection: keep-alive）,大大提高了傳輸效率。瀏覽器一般允許一個url最多6個tcp連接(同域內)，再多的請求就需要復用tcp連接了。但返回數據是類似串行的，即如果服務端對第二個請求的響應比第一個還快，那也必須等第一個請求返回結果后才能返回，這個在http2中得到解決。
• 增加了host和其他命令。 通過host字段可以用來區(qū)分同一臺物理服務器提供的不同web服務。

HTTP2的特點：

• 引入信道復用和分幀傳輸，數據是以二進制傳輸的（之前傳輸的字符串）。得益于此，HTTP2可以在同一TCP連接上連續(xù)快速的發(fā)送多個請求，并且可以無序的接收響應（類似于并行），大大提高傳輸效率。
• 引入頭信息壓縮等技術提高傳輸效率。將每次http請求都會包含的header信息壓縮（如 accept,Content-Type等），節(jié)省帶寬提高傳輸效率。
• 提供了推送的功能。

HTTP2和HTTP1的性能在線比較網站，HTTP2server push的性能比較，可以看出http2的性能提升主要原因在于信道復用和分幀傳輸技術。

1.2 發(fā)起一次請求瀏覽器端經歷的過程

? ? ? ?瀏覽器發(fā)起請求所經過的各過程，先判斷是否跳轉，然后查看是否可以利用緩存，再根據域名解析IP，然后創(chuàng)建TCP連接，如果是https還要建立安全的連接，最后發(fā)出請求和接收響應數據。理解圖中各節(jié)點有助于理解瀏覽器端原理，也可以根據耗時更好的判斷性能優(yōu)化點。

1.3 什么是跨域

? ? ? ?跨域是因為瀏覽器為了安全引入的同源限制策略：即瀏覽器限制頁面內請求的url必須和地址欄的url處于同域上,也就是域名,端口,協(xié)議相同。注意其實跨域的請求已經發(fā)出，也接收到響應，但是瀏覽器攔截了。

• 如何跨域？
  方法有很多。
  1.直接在服務器端設置允許跨域，即設置Access-Control-Allow-Orrigin:*可以允許跨域。
  2.利用jsonp，原理是AJAX直接請求普通文件存在跨域無權限訪問的問題，不過我們在調用js文件的時候又不受跨域影響，所以在script中調用js凡是擁有scr這個屬性的標簽都可以跨域例如<script><img><iframe><link>等
  跨域比較復雜，這里簡單了解。

1.4 數據協(xié)商：Accept 和Content

客戶端和服務端傳輸數據時，需要協(xié)商和聲明內容的格式，通過頭來指定，下面介紹常見的幾種header。

請求頭含義

Accept	客戶端可接受的數據類型,如application/json, text/plain, */*
Accept-Encoding	可接受的編碼格式，主要指壓縮方式，如gzip, deflate, br
Accept-Language	支持的語言類型，如zh-CN,zh;q=0.9
User-Agent	客戶端瀏覽器的信息
Content-Type	客戶端提交時內容的類型

服務端返回響應時，從瀏覽器可接受的格式中選擇一種返回，客戶端瀏覽器根據響應頭來進行解析。

響應頭含義

Content-Type	對應請求里的Accept,從可接受的數據格式中選擇一種格式返回。開發(fā)中經常遇到application/json
Content-Encoding	對應請求里的Accept-Encoding，服務端返回內容的壓縮方式
Content-Language	對應請求里的Accept-Language，服務端返回的語言類型

1.5 其他

302重定向
? ? ? ?302是重定向，在服務器端返回跳轉地址。301是永久跳轉地址，瀏覽器會緩存這個跳轉地址，所以即使跳轉地址變了瀏覽器還是會去之前那個跳轉地址，直到清除瀏覽器緩存！

Content-Security-Policy(CSP安全策略)
? ? ? ?Content-Security-Policy頭是控制網站資源獲取的一種安全策略，可以限制資源獲取權限，向服務器報告資源獲取越權。可以通過default-src限制網站請求的url，可以限制資源類型（如圖片，media，font，script等等）。如通過Content-Security-Policy :'default-src http: https:'來限制只允許頁面的http或https的請求，禁止腳本js代碼執(zhí)行請求。這個頭支持很多安全策略，這里只做簡單了解。

URI、URL區(qū)別
? ? ? ?URI：統(tǒng)一資源標識符，包含URL和URN，是更抽象的概念。
? ? ? ?URL協(xié)議的常見格式：協(xié)議://主機地址:端口/path?query=string#hash ，如https://mp.csdn.net/mdeditor/8299#。協(xié)議包含http、ftp、file等；主機地址（ip或域名）；端口為80時可省略，web服務端口一般為80；路由即文件路徑或文件名有默認值（如index.html），可省略；后面可添加一些查詢參數。可查看我的另一篇文章http從發(fā)出請求到接收響應的過程。

瀏覽器F12更多技巧：
a). 可以根據多種屬性來篩選請求
注意：這里的h2就代表了HTTP2的協(xié)議請求。connection-id代表tcp連接，不同的id對應一個新的tcp連接。
b). 選擇Slow 3G可以模擬網速較慢時候請求的情況，也可以在下面的custom add自定義上傳和下載的速度。
c). 勾選Disable cache就會強制不使用緩存。

2. 關于瀏覽器緩存那些事

2.1 cache-control 緩存策略

cache-control 頭可以設置很多值，根據類別有如下幾種：

public、 private、 no-cache可緩存性

? ? ? ?首先要知道在響應的返回內容所經過的網絡服務或者路徑中，有各種代理，緩存服務器等等（查看我的另一篇文章http從發(fā)出請求到接收響應的過程）。

• public：返回經過的任何一個節(jié)點（代理，緩存服務器）都可以緩存；
• private：只有發(fā)起請求的瀏覽器才可以緩存；
• no-cache：指本地可以使用緩存，但是每次要經過服務器驗證。也就是每次請求必須要到服務器進行驗證，服務器回復可以使用緩存，客戶端瀏覽器才可以使用本地緩存。no-cahce是最常用的策略，稍后會重點分析驗證的過程。

max-age 過期時間
? ? ? ?max-age設置緩存的過期時間，在時間過期之前，瀏覽器不會到服務器進行驗證，即使服務器內容已經改變！解決辦法有，打包后的js文件夾名根據js的內容生成hash碼來命名。這樣如果服務器端js文件有變化，則js的路徑也會變化，也就是嵌入到頁面內的url也會變化，所以瀏覽器就會根據新的url去請求js或靜態(tài)資源而不是利用緩存了。
? ? ? ?s-maxage專門為代理服務設置的過期時間設置。

must-revalidate 重新驗證
? ? ? ? 指max-age時間過期后，必須要請求服務驗證。 proxy-revalidate相同的作用，只不過只用在代理服務器上。一般用不到這兩個值，知道即可。

no-store
? ? ? ?指永遠不使用緩存，永遠都要去服務器請求新的響應，和谷歌瀏覽器中勾選Disable cache作用類似。注意和no-cache的區(qū)別。
? ? ? ?no-transform 只用于代理服務器，告訴它不要瞎改服務器返回的內容（比如自作聰明的壓縮、分割、轉換了）

? ? ? ?注意：以上這些策略只是規(guī)范，而不是強約束。可以設置多個值，逗號分隔。

? ? ? ?客戶端使用緩存的大概流程如下：

? ? ? ? 使用no-cache，每次請求都會向服務器驗證緩存，這里涉及到兩個頭Last-Modified和Etag。
? ? ? ? Last-Modified上次修改時間，瀏覽器請求后，服務器返回資源時會帶上一個響應頭Last-Modified指定一個時間。當瀏覽器再次請求時會通過If-Modified-Since頭攜帶前面服務器返回的時間，然后服務器收到后和本地的修改時間做對比，如果等于上次修改的時間，說明資源沒有變化，服務器就會告訴客戶端瀏覽器可以使用你本地的緩存（即返回狀態(tài)碼304！！）。
? ? ? ? Etag是更加嚴格的驗證，它會對資源作簽名（如對資源內容進行hash）。同樣的，服務器在返回資源時，響應頭會帶上Etag（hash生成的一個隨機串）。然后瀏覽器再次請求時通過If-None-Match或If-Match攜帶這個隨機串，服務器會進行比較，如果兩個摘要隨機串相同說明資源沒有變更，就會回復客戶端瀏覽器可以使用你本地的緩存（即返回狀態(tài)碼304！！）。

3. cookie

cookie的作用不再贅述，服務器通過set-cookie來設置cookie，cookie是鍵值對的形式，可以設置多個，瀏覽器下次請求就會帶上cookie。

cookie還有多種屬性：max-age和expires來控制cookie的過期時間；Secure指定cookie只在https時發(fā)送；HTTPOnly設置無法通過document.cookie來訪問，這個是為了防止重要的cookie數據被惡意js代碼來訪問，預防XFS攻擊；domain來設置cookie的域，如可以在一級域名test.com對應的服務器中設置cookie，這樣去訪問二級域名a.test.com或者b.test.com的服務器時，也可以攜帶cookie，即實現(xiàn)了共享cookie。

總結

以上是生活随笔為你收集整理的HTTP协议那些不得不说的事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。