摘要：協(xié)商緩存未設(shè)置上面兩個字段時為此模式，則為通用的默認緩存模式，通過對比服務(wù)器文件更新時間，和源服務(wù)器文件每次更新時，自動生成的版本號，來判斷是發(fā)送新文件，還是返回狀態(tài)碼，來告知瀏覽器使用瀏覽器緩存。

請求一個頁面或文件時，觀察開發(fā)者工具中的Network頁簽中，此文件的請求狀態(tài)，會發(fā)現(xiàn)常見的會出現(xiàn)200或304狀態(tài)，作為前端開發(fā)，200狀態(tài)最為熟悉，而304，也是成功的請求，只不過是使用了本地緩存而已。

使用本地緩存，至少有兩個好處：

加快頁面的展示速度，因為不用再從服務(wù)器把文件下載一遍。

能極大的節(jié)約服務(wù)器寬帶。

可能縮短用戶的展示速度，只是提高用戶體驗，對開發(fā)人員沒太多益處（當(dāng)然作為有責(zé)任感的開發(fā)，這點也不能忽略），但節(jié)約服務(wù)器寬帶，則能給技術(shù)開發(fā)人員減少極大的壓力了。

所以得學(xué)。

要說緩存，首先需要了解請求頭。
每一個請求，發(fā)出的時候，會自帶一個請求頭：Request Headers；
響應(yīng)返回的時候，自帶一個響應(yīng)頭：Response Headers；

緩存主要由服務(wù)器響應(yīng)時，在響應(yīng)頭中設(shè)置緩存方案，主要是設(shè)置兩個字段：

expires：不支持HTTP1.1及更高級的HTTP版本，設(shè)置一個資源到期時間點。

cache-control：只支持HTTP1.1和更高級的HTTP版本，優(yōu)先級高于expires，能控制本地緩存（私有緩存，或者成為瀏覽器緩存）和共享緩存（代理服務(wù)器緩存）

瀏覽器的HTTP緩存分為兩種：

強緩存：手動設(shè)置了expires或cache-control。

協(xié)商緩存：未設(shè)置上面兩個字段時為此模式，則為通用的默認緩存模式，通過對比服務(wù)器文件更新時間Last-Modified，和源服務(wù)器文件每次更新時，自動生成的版本號ETag，來判斷是發(fā)送新文件，還是返回狀態(tài)碼304，來告知瀏覽器使用瀏覽器緩存。

注：強緩存只是設(shè)置時間間隔，減少了刷新時請求服務(wù)器的次數(shù)，當(dāng)請求發(fā)出后，同樣也是使用協(xié)商緩存模式處理。

本文以下出現(xiàn)的服務(wù)器，如無特殊說明，指的是直接能訪問到的服務(wù)器，比如若有代理服務(wù)器，則指的是代理服務(wù)器；若無代理服務(wù)器，則為源服務(wù)器。

第一次請求資源，沒有任何緩存的余地，請求頭中的相關(guān)字段如下：

cache-control 當(dāng)前瀏覽器的緩存情況：


no-cache：一般為第一次請求、或強制刷新、或明確設(shè)置no-store的不緩存時，告知后臺我這兒完全沒有緩存，返回值正常為200

不會發(fā)出請求：非頁面html文件，設(shè)置了緩存時間，且此文件尚未過期，狀態(tài)碼200

max-age=0：當(dāng)前的頁面htlm文件，每次打開頁面都會請求一次，狀態(tài)值200或304

沒有此字段：非第一次，設(shè)置了過期時間，但是過期了



if-modified-since 非第一次請求，才會有：
用于協(xié)商緩存，判斷文件有沒有更新的依據(jù)，內(nèi)容是上次響應(yīng)時返回的Last-Modified字段，意思是服務(wù)器此文件的最后更新時間


If-None-Match：非第一次請求，才會有：
用于協(xié)商緩存，判斷文件有沒有更新的依據(jù)，內(nèi)容是上次響應(yīng)時返回的ETag字段，意思是服務(wù)器此文件的最后一個更新時，服務(wù)器隨機生成的版本號

Pragma 只第一次請求出現(xiàn)，值為no-cache，效果和cache-control: "no-cache" 等同，用于兼容http1.0

設(shè)置位置：

web服務(wù)器設(shè)置，比如 nginx Apache等（推薦）
若為前后臺未分離項目，可由后臺代碼中設(shè)置
可由前端，在html頁面中，使用標(biāo)簽設(shè)置

相關(guān)字段說明:

expires 到期時間
已被cache-control取代，其值類似于："Wed, 08 Jan 2020 08:25:55 GMT"

cache-control 緩存執(zhí)行方案設(shè)置的常用值：

max-age=秒數(shù)：單位為秒的時間間隔，向服務(wù)器請求一次之后，再次想要請求時的間隔未超過此時間，則不會發(fā)出請求，直接使用本地緩存，狀態(tài)碼200；直到時間超過，才能發(fā)出請求，但如果服務(wù)器對比后，發(fā)現(xiàn)此文件未變化，則返回304，仍是使用緩存，若變化了，才會發(fā)送新文件，并返回200

s-maxage=秒數(shù)：功能同max-age=秒數(shù)，只對代理服務(wù)器生效，優(yōu)先級高于max-age=秒數(shù)


private：只允許瀏覽器緩存

public：可以被代理服務(wù)器緩存

must-revalidate：表示瀏覽器中的文件被命中，必須要檢查源服務(wù)器是否有更新，即使已經(jīng)有緩存

proxy-revalidata：表示代理服務(wù)器每次被請求，必須要檢查源服務(wù)器是否有更新，即使已經(jīng)有緩存

no-cache：看似是不緩存，其實仍然有緩存，只不過每次都會向源服務(wù)器對比一下文件，仍會出現(xiàn)304

no-store：瀏覽器和代理服務(wù)器真實不緩存，每次都直接請求并獲取文件

Date: 此文件在頁面中被使用的時間
最近一次向服務(wù)器請求時，服務(wù)器返回的時間，若最近幾次刷新，都直接使用了瀏覽器緩存，沒有發(fā)出請求，則值不變，其值類似"Tue, 08 Jan 2019 08:14:59 GMT其值類似



Last-Modified 服務(wù)器中，此文件的最后更新時間
當(dāng)瀏覽器再次發(fā)出請求此文件時，會把此值放在請求頭If-Modified-Since字段中（見上面請求頭說明），其值類似"Tue, 08 Jan 2019 06:45:12 GMT"



ETag 每次源服務(wù)器的文件更新，自動生成的文件的版本號，HTTP1.1才支持
當(dāng)瀏覽器再次發(fā)出請求此文件時，會把此值放在請求頭If-None-Match字段中（見上面請求頭說明），優(yōu)先級高于Last-Modified，其值類似"5c3446f8-57b"



注：HTTP1.0于1996年提出，HTTP1.1于1999年提出，HTTP2.0于2015年提出，當(dāng)前應(yīng)用最廣泛的為HTTP1.1。
注：當(dāng)使用PUT方法，對服務(wù)器資源進行更新的時候，請求頭可能還會出現(xiàn)If-Match這個字段，這個字段與If-None-Match在使用方式類似，但功能不同；
這個字段會把舊文件的Etag帶給服務(wù)器，服務(wù)器在對比當(dāng)前文件的Etag是否和If-None-Match（舊文件的Etag）相同，如果相同，說明此時服務(wù)器仍是舊文件，則可以覆蓋更新；若不同，說明此文件已被更新過，不再進行預(yù)期的覆蓋更新。

以下為響應(yīng)頭設(shè)置不同的cache-control，在非html文件、不同的請求方式時，請求的情況和請求頭的cache-control的值，和網(wǎng)絡(luò)和資源正常時，狀態(tài)碼的值。

html文件再第一次請求，和以上的資源情況相同，且無論首次的響應(yīng)頭中cache-control為何值，非第一次請求的請求頭中的cache-control字段均為max-age=0，使用協(xié)商緩存。

html文件是整個頁面的入口，只要html未發(fā)生變化，那說明引用的資源的名字，是沒有發(fā)生變化的，資源的請求動向會符合上面的表格；如果發(fā)生了變了，那新變化的資源，都會進行首次請求（如果很早之前，這個資源被使用過，則同樣走上面的表格）。

WebKit內(nèi)核，將資源分為兩個大類，一個是主資源，比如html文件和下載項；二是派生資源，比如頁面中的圖片、js、css等資源。

如果主資源訪問失敗，那會立刻進行報錯，比如404（不存在該資源），403（資源拒絕此次訪問）等等；
只要主資源可以訪問完成，那么基礎(chǔ)的頁面就可以展示了，此時如果其他的派生資源，比如css樣式文件，js腳本文件，圖片文件等資源無法訪問，也只會在控制臺進行報錯。

當(dāng)前前端緩存的文件，主要有兩個位置：

from memory cache：緩存在內(nèi)存中，當(dāng)瀏覽器關(guān)閉，資源清除，也就是緩存被清除。

from disk cache：緩存在磁盤中，可以長久緩存，即使電腦重啟也無妨，但只能緩存派生資源。

這個位置，是可以在前臺的控制臺的network頁簽中看到的，且也只有當(dāng)用到該緩存的文件時，才會展示，如下圖所示：

在Size一欄中，270B表示發(fā)出了請求，表示了該文件的大??；
from memory cache就顯而易見了，表示未發(fā)出請求，直接從內(nèi)存中拿的現(xiàn)有的已緩存的資源；
from disk cache同樣表示未發(fā)出請求，只不過是從磁盤中直接拿的資源；

HTTP1.0最早在網(wǎng)頁中使用是在1996年，那個時候只是使用一些較為簡單的網(wǎng)頁上和網(wǎng)絡(luò)請求上，而HTTP1.1則在1999年才開始廣泛應(yīng)用于現(xiàn)在的各大瀏覽器網(wǎng)絡(luò)請求中，同時HTTP1.1也是當(dāng)前使用最為廣泛的HTTP協(xié)議。 主要區(qū)別主要體現(xiàn)在：

緩存處理，在HTTP1.0中主要使用header里Last-Modified和Expires來，來實現(xiàn)協(xié)商緩存，而HTTP1.1則引入了更多的緩存控制策略例如Etag，If-Unmodified-Since（用于斷點續(xù)傳），cache-control, If-None-Match等更多可供選擇的緩存頭來控制緩存策略。
帶寬優(yōu)化及網(wǎng)絡(luò)連接的使用，HTTP1.0中，存在一些浪費帶寬的現(xiàn)象，例如客戶端只是需要某個對象的一部分，而服務(wù)器卻將整個對象送過來了，并且不支持斷點續(xù)傳功能，HTTP1.1則在請求頭引入了range頭域，它允許只請求資源的某個部分，即返回碼是206（Partial Content），這樣就方便了開發(fā)者自由的選擇以便于充分利用帶寬和連接。
錯誤通知的管理，在HTTP1.1中新增了24個錯誤狀態(tài)響應(yīng)碼，如409（Conflict）表示請求的資源與資源的當(dāng)前狀態(tài)發(fā)生沖突；410（Gone）表示服務(wù)器上的某個資源被永久性的刪除。
Host頭處理，在HTTP1.0中認為每臺服務(wù)器都綁定一個唯一的IP地址，因此，請求消息中的URL并沒有傳遞主機名（hostname）。但隨著虛擬主機技術(shù)的發(fā)展，在一臺物理服務(wù)器上可以存在多個虛擬主機（Multi-homed Web Servers），并且它們共享一個IP地址。HTTP1.1的請求消息和響應(yīng)消息都應(yīng)支持Host頭域，且請求消息中如果沒有Host頭域會報告一個錯誤（400 Bad Request）。
長連接，HTTP 1.1支持長連接（PersistentConnection）和請求的流水線（Pipelining）處理，在一個TCP連接上可以傳送多個HTTP請求和響應(yīng)，減少了建立和關(guān)閉連接的消耗和延遲，在HTTP1.1中默認開啟Connection： keep-alive，一定程度上彌補了HTTP1.0每次請求都要創(chuàng)建連接的缺點。

注：參考鏈接：HTTP1.0、HTTP1.1 和 HTTP2.0 的區(qū)別

HTTPS：是以安全為目標(biāo)的HTTP通道，簡單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎(chǔ)是SSL，因此加密的詳細內(nèi)容就需要SSL。

HTTPS協(xié)議需要到CA申請證書，一般免費證書很少，需要交費。
HTTP協(xié)議運行在TCP之上，所有傳輸?shù)膬?nèi)容都是明文，HTTPS運行在SSL/TLS之上，SSL/TLS運行在TCP之上，所有傳輸?shù)膬?nèi)容都經(jīng)過加密的。
HTTP和HTTPS使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。
HTTPS可以有效的防止運營商劫持，解決了防劫持的一個大問題。

注：參考鏈接：HTTP與HTTPS的區(qū)別