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

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

使用本地緩存，至少有兩個(gè)好處：

加快頁(yè)面的展示速度，因?yàn)椴挥迷購(gòu)姆?wù)器把文件下載一遍。

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

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

所以得學(xué)。

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

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

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

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

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

強(qiáng)緩存：手動(dòng)設(shè)置了expires或cache-control。

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

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

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

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

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


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

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

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

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



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


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

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

設(shè)置位置：

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

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

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

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

max-age=秒數(shù)：?jiǎn)挝粸槊氲臅r(shí)間間隔，向服務(wù)器請(qǐng)求一次之后，再次想要請(qǐng)求時(shí)的間隔未超過(guò)此時(shí)間，則不會(huì)發(fā)出請(qǐng)求，直接使用本地緩存，狀態(tài)碼200；直到時(shí)間超過(guò)，才能發(fā)出請(qǐng)求，但如果服務(wù)器對(duì)比后，發(fā)現(xiàn)此文件未變化，則返回304，仍是使用緩存，若變化了，才會(huì)發(fā)送新文件，并返回200

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


private：只允許瀏覽器緩存

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

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

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

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

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

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



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



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



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

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

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

html文件是整個(gè)頁(yè)面的入口，只要html未發(fā)生變化，那說(shuō)明引用的資源的名字，是沒(méi)有發(fā)生變化的，資源的請(qǐng)求動(dòng)向會(huì)符合上面的表格；如果發(fā)生了變了，那新變化的資源，都會(huì)進(jìn)行首次請(qǐng)求（如果很早之前，這個(gè)資源被使用過(guò)，則同樣走上面的表格）。

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

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

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

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

from disk cache：緩存在磁盤(pán)中，可以長(zhǎng)久緩存，即使電腦重啟也無(wú)妨，但只能緩存派生資源。

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

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

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

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

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

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

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

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