從強緩存和協商緩存兩個方面深入探究緩存機制

一、強緩存

強緩存主要是指利用http響應報文頭中的Expires和Cache-Control欄位來判斷緩存是否失效，如果沒有失效則使用本地緩存數據。

1. Expires欄位

Expires: Wed, 21 Oct 2020 07:28:00 GMT

Expires是一個正好過期的日期時間，表示該時間前的響應都是有效的，即緩存在這個時間之前可以使用。但是該欄位存在一些弊端，就是伺服器返回的時間是在伺服器端設置的，客戶端與伺服器端的時間可能不一致導致響應失效。

2. Cache-Control欄位

Cache-Control: max-age=31536000

Cache-Control是HTTP/1.1協議新增的欄位，它的值是max-age=xxxx，表示該響應在xxxx秒內是有效的，無論是否過期，都應該使用本地緩存。

同時，Cache-Control還可以設置其他屬性，詳情如下：

• public：響應可以被所有的客戶端緩存。
• private：響應只能被單個用戶緩存，不能被共享緩存、代理緩存等復用。
• no-cache：客戶端緩存伺服器返回的響應，但在使用這些緩存數據之前，必須先向原伺服器請求驗證資源是否被修改過。
• no-store：響應中禁止寫入緩存，即不允許緩存此響應的任何版本。

二、協商緩存

協商緩存主要是利用http報文頭中的Etag和Last-Modified欄位結合緩存驗證來決策是否使用緩存數據。如果伺服器判斷請求的資源未發生改變，則返回304 Not Modified狀態碼，告訴客戶端可以使用本地緩存數據。

1. Etag欄位

Etag: "2e22c4-d-560ac04e56b89"

Etag是一個類似於版本號的欄位，由伺服器返回，客戶端根據這個值來判斷緩存是否失效，可以認為是一個文件的唯一標識符。當客戶端再次請求該文件時，通過If-None-Match欄位帶上上一次返回的Etag值告訴伺服器本地緩存的版本號，伺服器根據該值來判斷緩存是否失效。

2. Last-Modified欄位

Last-Modified: Mon, 19 Oct 2020 08:42:54 GMT

Last-Modified是一個時間戳，表示該文件最後一次修改的時間。當客戶端再次請求該文件時，通過If-Modified-Since欄位帶上上一次返回的Last-Modified值告訴伺服器本地緩存的最後修改時間，伺服器根據該值來判斷緩存是否失效。

3. 緩存驗證

如果客戶端請求的資源沒有過期，則伺服器會返回304 Not Modified狀態碼，告訴客戶端可以使用本地緩存數據。此時響應報文中的實體主體不需要攜帶內容，通過設置頭信息如下：

HTTP/1.1 304 Not Modified
Etag: "2e22c4-d-560ac04e56b89"
Cache-Control: max-age=31536000

三、應用場景

1. 強緩存

強緩存適用於靜態資源不經常更新的場景，比如js、css、圖片等靜態文件。使用強緩存可以減少對伺服器的請求，提高頁面載入速度。

2. 協商緩存

協商緩存適用於動態數據或者靜態文件的更新比較頻繁的場景，協商緩存能夠減少對伺服器的請求次數，避免浪費帶寬，提升用戶體驗。

四、代碼示例

1. 強緩存

app.use(express.static(path.join(__dirname, 'public'), {
    maxAge: 60 * 60 * 24 * 365, // 單位為秒
    etag: false,
    lastModified: false
}));

設置maxAge參數為一年，表示客戶端對於該資源的有效期為1年，當客戶端再次訪問該資源時會首先從本地緩存中查找，如果本地緩存失效則再向服務端發起請求。

2. 協商緩存

app.get('/api/data', function(req, res) {
    const data = {
        "name": "Tom",
        "age": 20,
        "address": "Beijing"
    };
    const time = new Date();
    res.set('Last-Modified', time.toUTCString());
    res.set('Expires', new Date(Date.now() + 60000).toUTCString());
    res.send(data);
});

設置Last-Modified和Expires響應頭，告訴客戶端本次響應的最後修改時間和過期時間，在客戶端再次請求該資源時通過If-Modified-Since和If-None-Match兩個欄位進行驗證，判斷是否使用本地緩存。

五、總結

緩存機制是Web性能優化的重要方面，強緩存和協商緩存兩種緩存方式在不同的業務場景下均能提升頁面性能，減少請求次數，提高用戶體驗。在使用緩存機制時，需要根據具體的業務場景選擇合適的緩存方式和合理的緩存時間，並進行定期的緩存清理，避免數據一直存儲在本地緩存導致出現的一些問題。