快取是什麼？用node怎麼實現？

瀏覽器快取是前端優化的一個重要方向，通過快取靜態資源，可以減少頁面的載入時間和減輕伺服器負擔，提高使用者體驗。本文將介紹瀏覽器快取的基本原理和常見的快取策略，並用 nodejs的 koa 框架下的程式碼實現。

快取原理

瀏覽器快取的基本原理是將靜態資源（如 CSS、JavaScript、圖片等）快取到本地，當頁面再次請求這些資源時，直接從本地獲取，而不是重新從伺服器下載。這可以減少頁面的載入時間和減輕伺服器負擔，提高使用者體驗。

在 HTTP 協定中，瀏覽器快取可以通過兩種機制實現：強快取和協商快取。【相關教學推薦：】

強快取

Expires欄位：
- 值為伺服器端返回的到期時間，可能因為伺服器端和使用者端時間不同而造成快取命中誤差
Cache-Control（替代方案）
- public：所有內容都被快取（使用者端和代理伺服器都可被快取）
- private：只快取到私有快取中（使用者端）
- no-cache：與伺服器端確認返回的響應是否被更改，然後才能使用該響應來滿足後續對同一個網址的請求。因此，如果存在合適的驗證令牌 (ETag)，no-cache 會發起往返通訊來驗證快取的響應，如果資源未被更改，可以避免下載。
- no-store：值不快取
- must-revalidation/proxy-revalidation：如果快取內容失效，則請求必須傳送到伺服器已進行重新驗證
- max-age=xxx：快取內容在xxx秒後失效，這個選項只能在http1.1使用， 比last-Modified優先順序更高
last-Modified（上次修改日期）
- last-Modified：儲存於伺服器中，記錄該資源上次修改的日期（不能精確到秒，如果在數秒內多次修改，可能會導致錯誤命中快取）
- if-modified-since：儲存於使用者端中，請求被攜帶並與伺服器端的last-Modified比較，相同則直接命中快取返回304狀態碼

koa實現強快取

const Koa = require('koa');
const app = new Koa();

// 設定 expires方案
const setExpires = async (ctx, next) => {
  // 設定快取時間為 1 分鐘
  const expires = new Date(Date.now() + 60 * 1000);
  ctx.set('Expires', expires.toUTCString());
  await next();
}
// Cache-Control方案（優先執行）
const setCacheControl = async (ctx, next) => {
  // 設定快取時間為 1 分鐘
  ctx.set('Cache-Control', 'public, max-age=60');
  await next();
}
// Last-Modified方案
const setLastModified = async (ctx, next) => {
  // 獲取資源最後修改時間
  const lastModified = new Date('2021-03-05T00:00:00Z');
  // 設定 Last-Modified 頭
  ctx.set('Last-Modified', lastModified.toUTCString());
  await next();
}

const response = (ctx) => {
  ctx.body = 'Hello World';
}

// 跟Last-Modified方案相對應
const lastModifiedResponse = (ctx) => {
  // 如果資源已經修改過，則返回新的資源
  if (ctx.headers['if-modified-since'] !== ctx.response.get('Last-Modified')) {
    	response(ctx)
  } else ctx.status = 304;
}

app.get('/getMes', setExpires, response);

app.listen(3000, () => console.log('Server started on port 3000'));
登入後複製

協商快取（瀏覽器和伺服器通過一個值進行協商判斷）

Etag/if-None-Match
- Etag：伺服器根據請求的資源計算一個雜湊值（也可以是其他演演算法，代表一個資源識別符號） 並返回給瀏覽器，下次瀏覽器請求該資源時通過if-None-Match欄位將Etag傳送給伺服器

Last_Modified和if-Modified-Since
- last-Modified：儲存於伺服器中，記錄該資源上次修改的日期（不能精確到秒，如果在數秒內多次修改，可能會導致錯誤命中快取）
- if-modified-since：儲存於使用者端中，請求被攜帶並與伺服器端的last-Modified比較，相同則直接命中快取返回304狀態碼

協商快取ETag和Last-Modified區別：

ETag 是伺服器為資源分配的唯一識別符號，而 Last-Modified 是伺服器報告的資源的最後修改時間。
ETag 可以使用任何演演算法生成，例如雜湊，而 Last-Modified 只能使用特定的時間格式（GMT）。
ETag 的比較是強驗證器（exact-match validator），需要完全匹配，而 Last-Modified 的比較是弱驗證器（weak validator），只需要在同一秒鐘內相同即可。
ETag 適用於所有型別的資源，而 Last-Modified 只適用於不常更改的資源，例如圖片、視訊等。

對於經常更新的資源，ETag 更適合，因為它可以更準確地檢測資源是否已經被修改；而對於不經常更新的資源，Last-Modified 更適合，因為它可以減少伺服器負載和網路流量。

koa實現協商快取

const Koa = require('koa');
const app = new Koa();

// 設定 eTag方案
const setExpires = async (ctx, next) => {
  // 設定快取時間為 1 分鐘
  const maxAge = 60;
  ctx.set('Cache-Control', `public, max-age=${maxAge}`);
  // 設定 ETag 頭
  const etag = 'etag-123456789';
  ctx.set('ETag', etag);

  await next();
}
// Last-Modified方案
const setLastModified = async (ctx, next) => {
  // 設定快取時間為 1 分鐘
  const maxAge = 60;
  ctx.set('Cache-Control', `public, max-age=${maxAge}`);
  // 設定 Last-Modified 頭
  const lastModified = new Date('2021-03-05T00:00:00Z');
  ctx.set('Last-Modified', lastModified.toUTCString());

  await next();
}

const response = (ctx) => {
  ctx.body = 'Hello World';
}

// 跟Etag方案對應
const etagResponse = (ctx) => {
  // 如果 ETag 頭未被修改，則返回 304
  if (ctx.headers['if-none-match'] === ctx.response.get('ETag')) {
    ctx.status = 304;
  } else ctx.body = 'Hello World';
}
// 跟Last-Modified方案相對應
const lastModifiedResponse = (ctx) => {
  // 如果資源已經修改過，則返回新的資源
  if (ctx.headers['if-modified-since'] !== ctx.response.get('Last-Modified')) {
    	response(ctx)
  } else ctx.status = 304;
}

app.get('/getMes', setExpires, response);

app.listen(3000, () => console.log('Server started on port 3000'));
登入後複製

koa使用雜湊計算Etag值：

const Koa = require('koa');
const crypto = require('crypto');

const app = new Koa();

// 假設這是要快取的資源
const content = 'Hello, world!';

app.use(async (ctx) => {
  // 計算資源的雜湊值
  const hash = crypto.createHash('md5').update(content).digest('hex');

  // 設定 ETag 頭
  ctx.set('ETag', hash);

  // 判斷使用者端是否傳送了 If-None-Match 頭
  const ifNoneMatch = ctx.get('If-None-Match');
  if (ifNoneMatch === hash) {
    // 如果使用者端傳送了 If-None-Match 頭，並且與當前資源的雜湊值相同，則返回 304 Not Modified
    ctx.status = 304;
  } else {
    // 如果使用者端沒有傳送 If-None-Match 頭，或者與當前資源的雜湊值不同，則返回新的資源
    ctx.body = content;
  }
});

app.listen(3000);
登入後複製

快取執行流程：

強快取未失效，從快取中讀取資料，cache-control優先順序高於last-Modified
強快取失效，執行協商快取，Etag的優先順序會高於last-Modified
快取未失效伺服器返回304狀態碼，使用者端從快取中讀取資料
快取已失效則返回資源和200狀態碼

強快取和協商快取的使用？

強快取通常在瀏覽器中快取靜態資源（如 CSS、JavaScript、圖片等），以減少頁面的載入時間和減輕伺服器負擔。

協商快取通常用於快取動態資源（如 HTML 頁面、API 資料等），以減少伺服器的負擔和網路頻寬的消耗。

在實際應用中，強快取和協商快取可以單獨使用或一起使用。對於一些靜態資源，可以只使用強快取；對於一些動態資源，可以只使用協商快取；對於一些經常變化的資源，可以使用強快取和協商快取結合使用，既可以減少伺服器的負擔，也可以保證及時獲取到最新的資源。

結語

雖然是用後端nodejs實現，但是我認為前端也應該多多少少了解一下這方面的知識，以便於後端更好的進行互動。後面會講前端如何實現？

更多node相關知識，請存取：！

以上就是快取是什麼？用node怎麼實現？的詳細內容，更多請關注TW511.COM其它相關文章！