為了提高瀏覽器 HTTP 請(qǐng)求的性能，在 HTTP 協(xié)議中有幾種緩存機(jī)制來(lái)保證網(wǎng)絡(luò)訪問(wèn)的性能。HTTP 協(xié)議中提供了如下幾種緩存：Cache-Control、Expires、Last-modified 和 ETag，很好的利用它們可以提高我們網(wǎng)站的速度。
Expires
Expires 類似于 Cache-Control 中的 max-age，它告訴瀏覽器在這個(gè)時(shí)間（例如：Last-Modified:Sat, 25 Jun 2016 02:26:30 GMT）內(nèi)直接從本地讀取資源，不必再次向服務(wù)器請(qǐng)求。
Cache-Control
它用于定義資源的緩存策略，可以設(shè)置以下值：
-
no-store：絕對(duì)禁止緩存，每次請(qǐng)求支援都要從服務(wù)器端獲?。?/li> -
no-cache： -
publice：允許代理服務(wù)器緩存資源； -
private：不允許代理服務(wù)器緩存資源； -
max-age：設(shè)置緩存的最大有效時(shí)間（單位：秒），當(dāng)發(fā)送請(qǐng)求的時(shí)間在有效期范圍內(nèi)，它不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接從本地獲取資源。當(dāng)它與 Expries 緩存同時(shí)使用時(shí)，Expries 失效； -
s-maxage：類似于max-age，只適用于 publice` 緩存，一般用在 CDN 服務(wù)器上；
當(dāng) Expires 和 max-age 同時(shí)存在時(shí)，Expires 將被忽略。
Last-modified
Last-modified 是服務(wù)器端返回給瀏覽器資源的最后修改時(shí)間。如果同樣一個(gè)資源的最后修改時(shí)間有變動(dòng)，服務(wù)器會(huì)返回給瀏覽器 200 告訴瀏覽器需要重新向服務(wù)器請(qǐng)求新資源；如果沒(méi)有變動(dòng)，服務(wù)器會(huì)返回瀏覽器 304 告訴瀏覽器資源沒(méi)有變動(dòng)，直接從本地讀取。
ETag
ETag 是為了解決 Last-modified 的一些缺陷：
- 一些資源的最后修改時(shí)間變了，但是內(nèi)容沒(méi)有改變；
- Last-modified 只能精確到秒級(jí)；
這樣我們引入了 ETag，服務(wù)端會(huì)通過(guò)資源文件生成一段 Hash 字符串來(lái)標(biāo)示這個(gè)資源，在 HTTP 的頭部會(huì)將此標(biāo)示返回給瀏覽器端，同時(shí)瀏覽器每次請(qǐng)求會(huì)將 ETag 發(fā)送給服務(wù)器端，此刻服務(wù)器端會(huì)比較請(qǐng)求和和即將返回的資源的 ETag，如果不一樣，服務(wù)器會(huì)返回給瀏覽器 200 告訴瀏覽器需要重新向服務(wù)器請(qǐng)求新資源；如果一樣，服務(wù)器會(huì)返回瀏覽器 304 告訴瀏覽器資源沒(méi)有變動(dòng)，直接從本地讀取。
當(dāng) Etag 和 Last-modified 同時(shí)存在時(shí)，Last-modified 會(huì)忽略。
它們的區(qū)別
為什么有這么多緩存呢，其實(shí)它們是存在區(qū)別的：Expires 以及 Cache-Control 兩種緩存在有效期內(nèi)，它們是不會(huì)向服務(wù)器端發(fā)送任何請(qǐng)求的，直接獲取本地資源；然而 Last-modified 和 ETag 還是需要請(qǐng)求服務(wù)器，服務(wù)器比較完后高速瀏覽器是否需要從本地獲取。
這幾種緩存需要搭配使用，如果客戶端的有效期失效后，再次訪問(wèn)服務(wù)器端讓服務(wù)器端比較一下資源內(nèi)容是否改變，如果改變了這樣服務(wù)器端才返回最新資源。
對(duì)于不同的資源的緩存策略
不同類型的資源會(huì)采用不同的緩存策略，通常 html 文件經(jīng)常會(huì)采用 Cache-Control:no-cache，css 和 js 文件通常會(huì)采用 Cache-Control:max-age。
