緩存是前端面試的一個常見知識點，下面對于實際項目中如何進行緩存的設置給出方案。

強緩存和協商緩存

瀏覽器緩存是瀏覽器將用戶請求過的靜態資源存儲到電腦本地磁盤中，當再次訪問時，就可以直接從本地緩存中加載而不需要去向服務器請求了。但是緩存也有缺點，如果服務端資源更新了，客戶端沒有強制刷新的情況下，看到的內容還是舊的。所以，前端需要根據項目中各個資源的實際情況，做出合理的緩存策略。這就出現了強緩存和協商緩存。

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

private：僅瀏覽器可以緩存

public：瀏覽器和代理服務器都可以緩存

max-age=xxx：過期時間

no-cache：不進行強緩存

no-store：不強緩存，也不協商緩存

強緩存步驟：1，第一次請求文件時，緩存中沒有該信息，直接請求服務器。

2，服務器返回請求的文件，并且http response header中cache-control為max-age=xxx

3，再次請求該文件時，判斷是否過期，如果沒有過期，直接讀取本地緩存，如果已經過期了，則進行協商緩存。

協商緩存：它的觸發條件有兩點，其一是Cache-Control 的值為 no-cache，其二是max-age 過期了。協商緩存中還有兩個重要的規則：

ETag：每個文件有一個，改動文件了就變了

Last-Modified：文件的修改時間

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

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

3，如果資源已經被更新，返回200狀態碼，瀏覽器獲取服務器最新資源。

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

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

HTML：使用協商緩存

CSS&JS&圖片：使用強緩存

ETag計算

Nginx

Nginx官方默認的ETag計算方式是為"文件最后修改時間16進制-文件長度16進制"。例：ETag： “59e72c84-2404”

Express

Express框架使用了serve-static中間件來配置緩存方案，其中，使用了一個叫etag的npm包來實現etag計算。

后端需要怎么設置

以nodejs為例，如果需要瀏覽器強緩存，可以這樣設置：

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

如果需要協商緩存，則可以這樣設置：

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

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

res.setHeader('ETag', xxx);

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。