緩存是前端面試的一個(gè)常見知識(shí)點(diǎn)，下面對(duì)于實(shí)際項(xiàng)目中如何進(jìn)行緩存的設(shè)置給出方案。

強(qiáng)緩存和協(xié)商緩存

瀏覽器緩存是瀏覽器將用戶請(qǐng)求過的靜態(tài)資源存儲(chǔ)到電腦本地磁盤中，當(dāng)再次訪問時(shí)，就可以直接從本地緩存中加載而不需要去向服務(wù)器請(qǐng)求了。但是緩存也有缺點(diǎn)，如果服務(wù)端資源更新了，客戶端沒有強(qiáng)制刷新的情況下，看到的內(nèi)容還是舊的。所以，前端需要根據(jù)項(xiàng)目中各個(gè)資源的實(shí)際情況，做出合理的緩存策略。這就出現(xiàn)了強(qiáng)緩存和協(xié)商緩存。

強(qiáng)緩存：通過http的response header中的Cache-Control和Expire兩個(gè)字段控制。其中Expire基本上已經(jīng)淘汰了，不用管，主要看Cache-Control的幾個(gè)取值含義：

private：僅瀏覽器可以緩存

public：瀏覽器和代理服務(wù)器都可以緩存

max-age=xxx：過期時(shí)間

no-cache：不進(jìn)行強(qiáng)緩存

no-store：不強(qiáng)緩存，也不協(xié)商緩存

強(qiáng)緩存步驟：1，第一次請(qǐng)求文件時(shí)，緩存中沒有該信息，直接請(qǐng)求服務(wù)器。

2，服務(wù)器返回請(qǐng)求的文件，并且http response header中cache-control為max-age=xxx

3，再次請(qǐng)求該文件時(shí)，判斷是否過期，如果沒有過期，直接讀取本地緩存，如果已經(jīng)過期了，則進(jìn)行協(xié)商緩存。

協(xié)商緩存：它的觸發(fā)條件有兩點(diǎn)，其一是Cache-Control 的值為 no-cache，其二是max-age 過期了。協(xié)商緩存中還有兩個(gè)重要的規(guī)則：

ETag：每個(gè)文件有一個(gè)，改動(dòng)文件了就變了

Last-Modified：文件的修改時(shí)間

協(xié)商緩存步驟：1，請(qǐng)求資源時(shí)，要同時(shí)比較本地該資源的ETag和Last-Modified(主要是ETag)和服務(wù)器最新資源該資源的ETag

2，如果資源沒有被更新，返回304狀態(tài)碼，瀏覽器讀取本地緩存

3，如果資源已經(jīng)被更新，返回200狀態(tài)碼，瀏覽器獲取服務(wù)器最新資源。

最大的問題就是每次都要向服務(wù)器驗(yàn)證一下緩存的有效性，但是這就使緩存失去了意義。

所以，給出一個(gè)比較合理的緩存方案：

HTML：使用協(xié)商緩存

CSS&JS&圖片：使用強(qiáng)緩存

ETag計(jì)算

Nginx

Nginx官方默認(rèn)的ETag計(jì)算方式是為"文件最后修改時(shí)間16進(jìn)制-文件長度16進(jìn)制"。例：ETag： “59e72c84-2404”

Express

Express框架使用了serve-static中間件來配置緩存方案，其中，使用了一個(gè)叫etag的npm包來實(shí)現(xiàn)etag計(jì)算。

后端需要怎么設(shè)置

以nodejs為例，如果需要瀏覽器強(qiáng)緩存，可以這樣設(shè)置：

res.setHeader('Cache-Control', 'public, max-age=xxx');

如果需要協(xié)商緩存，則可以這樣設(shè)置：

res.setHeader('Cache-Control', 'public, max-age=0');

res.setHeader('Last-Modified', xxx);

res.setHeader('ETag', xxx);

總結(jié)

以上是生活随笔為你收集整理的前端协商缓存强缓存如何使用_前端强缓存和协商缓存的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。