[[414810]]

作為前端開發(fā)人員，對(duì)于我們的站點(diǎn)或應(yīng)用的緩存機(jī)制我們能做的似乎不多，但這些卻是與我們關(guān)注的性能息息相關(guān)的部分，站點(diǎn)沒有做任何緩存機(jī)制，我們的頁(yè)面可能會(huì)因?yàn)橘Y源的下載和渲染變得很慢，但大家都知道去找前端去解決頁(yè)面慢的問題而不會(huì)去找服務(wù)端的開發(fā)人員。因此，了解相關(guān)的緩存機(jī)制和充分的利用它似乎就變得必不可少。

web端的緩存機(jī)制其實(shí)有多種，我在這里只是學(xué)習(xí)和整理了以瀏覽器為載體的HTTP緩存機(jī)制，看看它是如何工作的。

一、Web緩存的種類

1.1 數(shù)據(jù)庫(kù)緩存

我們可能聽說過memcached，它就是一種數(shù)據(jù)庫(kù)層面的緩存方案。數(shù)據(jù)庫(kù)緩存是指，當(dāng)web應(yīng)用的關(guān)系比較復(fù)雜，數(shù)據(jù)庫(kù)中的表很多的時(shí)候，如果頻繁進(jìn)行數(shù)據(jù)庫(kù)查詢，很容易導(dǎo)致數(shù)據(jù)庫(kù)不堪重荷。為了提供查詢的性能，將查詢后的數(shù)據(jù)放到內(nèi)存中進(jìn)行緩存，下次查詢時(shí)，直接從內(nèi)存緩存直接返回，提供響應(yīng)效率。

1.2 CDN緩存

CDN緩存一般是由網(wǎng)站管理員自己部署，為了讓他們的網(wǎng)站更容易擴(kuò)展并獲得更好的性能。通常情況下，瀏覽器先向CDN網(wǎng)關(guān)發(fā)起Web請(qǐng)求，網(wǎng)關(guān)服務(wù)器后面對(duì)應(yīng)著一臺(tái)或多臺(tái)負(fù)載均衡源服務(wù)器，會(huì)根據(jù)它們的負(fù)載請(qǐng)求，動(dòng)態(tài)將請(qǐng)求轉(zhuǎn)發(fā)到合適的源服務(wù)器上。從瀏覽器角度來看，整個(gè)CDN就是一個(gè)源服務(wù)器，從這個(gè)層面來說，瀏覽器和服務(wù)器之間的緩存機(jī)制，在這種架構(gòu)下同樣適用。

1.3 代理服務(wù)器緩存

代理服務(wù)器是瀏覽器和源服務(wù)器之間的中間服務(wù)器，瀏覽器先向這個(gè)中間服務(wù)器發(fā)起Web請(qǐng)求，經(jīng)過處理后（比如權(quán)限驗(yàn)證，緩存匹配等），再將請(qǐng)求轉(zhuǎn)發(fā)到源服務(wù)器。代理服務(wù)器緩存的運(yùn)作原理跟瀏覽器的運(yùn)作原理差不多，只是規(guī)模更大。

1.4 瀏覽器緩存

每個(gè)瀏覽器都實(shí)現(xiàn)了 HTTP 緩存，我們通過瀏覽器使用HTTP協(xié)議與服務(wù)器交互的時(shí)候，瀏覽器就會(huì)根據(jù)一套與服務(wù)器約定的規(guī)則進(jìn)行緩存工作。

1.5 應(yīng)用層緩存

應(yīng)用層緩存是指我們?cè)诖a層面上做的緩存。通過代碼邏輯，把曾經(jīng)請(qǐng)求過的數(shù)據(jù)或資源等，緩存起來，再次需要數(shù)據(jù)時(shí)通過邏輯上的處理選擇可用的緩存的數(shù)據(jù)。

二、為什么需要瀏覽器緩存？我們需要做些什么？

我們知道通過HTTP協(xié)議，在客戶端和瀏覽器建立連接時(shí)需要消耗時(shí)間，而大的響應(yīng)需要在客戶端和服務(wù)器之間進(jìn)行多次往返通信才能獲得完整的響應(yīng)，這拖延了瀏覽器可以使用和處理內(nèi)容的時(shí)間。這就增加了訪問服務(wù)器的數(shù)據(jù)和資源的成本，因此利用瀏覽器的緩存機(jī)制重用以前獲取的數(shù)據(jù)就變成了性能優(yōu)化時(shí)需要考慮的事情。

那么有什么建議嗎？當(dāng)然。

為每個(gè)資源指定一個(gè)明確的緩存策略，用以定義資源是否可以緩存，由誰(shuí)來緩存，可以緩存多久，并且在緩存時(shí)間到期時(shí)如何有效地重新驗(yàn)證。當(dāng)服務(wù)器返回一個(gè)響應(yīng)時(shí)，它需要在響應(yīng)頭中提供Cache-Control和ETag。

說到瀏覽器中的緩存機(jī)制，其實(shí)就相當(dāng)于HTTP協(xié)議定義的緩存機(jī)制，因?yàn)闉g覽器為我們實(shí)現(xiàn)了它。一般情況下我們會(huì)想到到HTTP響應(yīng)頭中的Expires，Cache-Control,Last-Modified.If-Modified-Since,Etag這樣的與緩存相關(guān)的響應(yīng)頭信息。

但是這里我們說服務(wù)器返回一個(gè)響應(yīng)時(shí)提供必要的Cache-Control和Etag即可。這是為什么呢？

因?yàn)镃ache-Control與Expires的作用一致，Last-Modified與ETag的作用也相近。但它們有以下區(qū)別：

現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1，所以Expires和Last-Modified的作用基本可以忽略，具備Cache-Control和Etag即可。

當(dāng)然用戶的行為也會(huì)影響瀏覽器的緩存，像這樣：

但我們先不考慮用戶的操作的影響，來看看服務(wù)器提供Cache-Control和ETag響應(yīng)頭來進(jìn)行的緩存是如何工作的。　　

三、使用Etag驗(yàn)證緩存的HTTP響應(yīng)

通常情況下，請(qǐng)求一個(gè)資源的過程大概是這樣的：

我在 再看Ajax  中整理了HTTP請(qǐng)求的請(qǐng)求頭和響應(yīng)頭的一些參數(shù)，這里就看下Etag的作用。

3.1 Etag的主要作用

服務(wù)器通過 ETag HTTP 頭傳遞驗(yàn)證碼，大概是像‘‘x123cef’’這樣的字符串。當(dāng)瀏覽器在資源過期后再次請(qǐng)求時(shí)，瀏覽器默認(rèn)會(huì)通過If-None-Match傳遞Etag的驗(yàn)證碼，通過驗(yàn)證碼可以進(jìn)行高效的資源更新檢查：如果資源未更改，則不會(huì)傳輸任何數(shù)據(jù)。 

Etag就主要用來在響應(yīng)過期之后，驗(yàn)證資源是否被修改。

3.2 Etag的工作原理

如上圖，服務(wù)器在第一次返回響應(yīng)的時(shí)候設(shè)置了緩存的時(shí)間120s，假設(shè)瀏覽器在這120s經(jīng)過之后再次請(qǐng)求服務(wù)器相同的資源，首先，瀏覽器會(huì)檢查本地緩存并找到之前的響應(yīng)，不幸的是，這個(gè)響應(yīng)現(xiàn)在已經(jīng)’過期’，無法在使用。此時(shí)，瀏覽器也可以直接發(fā)出新請(qǐng)求，獲取新的完整響應(yīng)，但是這樣做效率較低，因?yàn)槿绻Y源未被更改過，我們就沒有理由再去下載與緩存中已有的完全相同的字節(jié)。

于是就到了Etag發(fā)揮作用的時(shí)候了，通常服務(wù)器生成并返回在Etag中的驗(yàn)證碼，常常是文件內(nèi)容的哈希值或者某個(gè)其他指紋碼?？蛻舳瞬槐亓私庵讣y碼是如何生成的，只需要在下一個(gè)請(qǐng)求中將其發(fā)送給服務(wù)器(瀏覽器默認(rèn)會(huì)添加)：如果指紋碼仍然一致，說明資源未被修改，服務(wù)器會(huì)反悔304 Not Modified，這樣我們就可以跳過下載，利用已經(jīng)緩存了的資源，并且該資源會(huì)繼續(xù)緩存120s。就像這樣：

四、什么是Cache-Control？如何定義Cache-Control？

服務(wù)器響應(yīng)瀏覽器請(qǐng)求時(shí)響應(yīng)頭中的Cache-Control響應(yīng)頭使得每個(gè)資源都可以通過 Cache-Control HTTP 頭來定義自己的緩存策略，Cache-Control 指令用來告訴我們，那個(gè)資源在什么條件下可以緩存，以及可以緩存多久。

4.1 Cache-Control頭參數(shù)的含義(響應(yīng)頭中的Cache-Control)

    1 no-cache : 表示必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，然后才能使用該響應(yīng)來滿足后續(xù)對(duì)同一個(gè)網(wǎng)址的請(qǐng)求。因此，如果存在合適的驗(yàn)證令牌 (ETag)，no-cache 會(huì)發(fā)起往返通信來驗(yàn)證緩存的響應(yīng)，如果資源未被更改，可以避免下載。

    2 no-store : 禁止緩存任何響應(yīng)，也就是說每次用戶請(qǐng)求資源時(shí)，都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，每次都會(huì)下載完整的響應(yīng)。

    3 public ： 如果響應(yīng)被標(biāo)記為public，即使有關(guān)聯(lián)的 HTTP 認(rèn)證，甚至響應(yīng)狀態(tài)碼無法正常緩存，響應(yīng)也可以被緩存。

    4 private : 瀏覽器可以緩存private響應(yīng)，但是通常只為單個(gè)用戶緩存，因此，不允許任何代理服務(wù)器對(duì)其進(jìn)行緩存 。比如，用戶瀏覽器可以緩存包含用戶私人信息的 HTML 網(wǎng)頁(yè)，但是 CDN 不能緩存。

    5 max-age :  用來設(shè)置資源被緩存的最長(zhǎng)時(shí)間(單位是秒)。

4.2 如何使用Cache-Control

通常，我們可以通過下圖的流程來設(shè)置合適的響應(yīng)頭的Cache-Control頭。

五、已經(jīng)緩存的響應(yīng)，如何更新或廢棄？

一般情況下，瀏覽器發(fā)出的所有 HTTP 請(qǐng)求會(huì)首先被路由到瀏覽器的緩存，以查看是否緩存了可以用于實(shí)現(xiàn)請(qǐng)求的有效響應(yīng)。如果有匹配的響應(yīng)，會(huì)直接從緩存中讀取響應(yīng)，這樣就避免了網(wǎng)絡(luò)延遲以及傳輸產(chǎn)生的數(shù)據(jù)成本。然而，如果我們希望更新或廢棄已緩存的響應(yīng)，該怎么辦？

假設(shè)我們已經(jīng)告訴訪問者某個(gè) CSS 樣式表緩存長(zhǎng)達(dá) 24 小時(shí) (max-age=86400)，但是設(shè)計(jì)人員剛剛提交了一個(gè)更新，我們希望所有用戶都能使用。我們?cè)撊绾瓮ㄖ性L問者緩存的 CSS 副本已過時(shí)，需要更新緩存？

實(shí)際上以前沒有請(qǐng)求過該資源的新的用戶會(huì)得到更新的資源，但是請(qǐng)求過資源的用戶將在過期時(shí)間達(dá)到之前一直得到舊的被緩存的資源，直到他手動(dòng)的去清理了瀏覽器的緩存。手動(dòng)清理瀏覽器緩存這種事可能只有程序員才會(huì)做，那么我們要怎么做才能讓用戶得到更新后的資源呢？

其實(shí)很簡(jiǎn)單，我們可以在資源的內(nèi)容更改后，更改資源的網(wǎng)址，強(qiáng)制用戶下載新響應(yīng)。比如在資源鏈接后添加參數(shù)：

六、對(duì)于緩存機(jī)制，現(xiàn)在可以做的有哪些？

我在瀏覽資料的時(shí)候發(fā)現(xiàn)了一個(gè)caching checklist，比較具有參考價(jià)值，我們可以遵循建議合理的利用緩存機(jī)制：

    1 使用一致的網(wǎng)址：如果在不同的網(wǎng)址上提供相同的內(nèi)容，那么將會(huì)多次獲取和存儲(chǔ)相同的內(nèi)容。提示：網(wǎng)址是區(qū)分大小寫的！

    2 確保服務(wù)器提供驗(yàn)證碼 (ETag)：通過驗(yàn)證碼，如果服務(wù)器上的資源未被更改，就不必傳輸相同的字節(jié)。

    3 確定代理緩存可以緩存哪些資源：對(duì)所有用戶的響應(yīng)完全相同的資源很適合由 CDN 或其他代理緩存進(jìn)行緩存。

    4 確定每個(gè)資源的最優(yōu)緩存周期：不同的資源可能有不同的更新要求。審查并確定每個(gè)資源適合的 max-age。

    5 確定網(wǎng)站的最佳緩存層級(jí)：對(duì) HTML 文檔組合使用包含內(nèi)容指紋碼的資源網(wǎng)址以及短時(shí)間或 no-cache 的生命周期，可以控制客戶端獲取更新的速度。

    6 變動(dòng)最小化：有些資源的更新比其他資源頻繁。如果資源的特定部分（例如 JavaScript 函數(shù)或一組 CSS 樣式）會(huì)經(jīng)常更新，應(yīng)考慮將其代碼作為單獨(dú)的文件提供。這樣，每次獲取更新時(shí)，剩余內(nèi)容（例如不會(huì)頻繁更新的庫(kù)代碼）可以從緩存中獲取，確保下載的內(nèi)容量最少。