强缓存与协商缓存

强缓存与协商缓存

当浏览器请求资源时，可以使用强缓存和协商缓存来提高性能并减少网络请求。以下是它们的用途、用法和区别：

强缓存：

• 用途：通过设置缓存标识来判断资源是否过期，如果资源仍然有效，则直接从缓存中获取，不发送请求到服务器。
• 用法：服务器通过设置响应头中的缓存标识来实现强缓存，常见的缓存标识有：
  Cache-Control：指定缓存的控制策略，例如设置为max-age=3600表示资源在 3600 秒内有效。
  Expires：指定资源的过期时间，是一个绝对时间，例如Expires: Wed, 21 Oct 2022 07:28:00 GMT。
  示例代码：

// 设置 Cache-Control
response.setHeader('Cache-Control', 'max-age=3600');

// 设置 Expires
response.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());

协商缓存：

• 用途：通过与服务器进行通信，判断资源是否发生变化，如果未发生变化，则返回一个"304 Not Modified"的响应，告诉浏览器可以使用缓存。
• 用法：服务器通过设置响应头中的缓存标识来实现协商缓存，常见的缓存标识有：
  Last-Modified：指定资源的最后修改时间。
  ETag：指定资源的唯一标识符，通常是根据资源内容生成的哈希值。
  示例代码：

// 设置 Last-Modified
response.setHeader('Last-Modified', new Date(lastModified).toUTCString());

// 设置 ETag
response.setHeader('ETag', generateETag(resource));

区别：

强缓存的优先级高于协商缓存，如果强缓存生效，浏览器直接从缓存中获取资源，不发送请求到服务器。
强缓存通过缓存标识判断资源是否过期，而协商缓存通过与服务器通信判断资源是否发生变化。
强缓存效率高，但判断精确度低；协商缓存效率相对较低，但判断精确度高。
请根据具体需求选择合适的缓存策略，以提高性能和用户体验。

应用配置

在日常使用中，只需要设置服务端的响应头来配置强缓存和协商缓存，一旦服务器配置了缓存策略，终端（例如浏览器）会自动根据服务器响应的缓存标识进行缓存控制。终端不需要额外的配置来使用缓存，它会自动处理缓存逻辑。

在Node.js中设置强缓存和协商缓存的配置如下：

• 强缓存

app.get('/your-route', (req, res) => {
  // 设置 Cache-Control
  res.setHeader('Cache-Control', 'max-age=3600');
  
  // 设置 Expires
  res.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());
  
  // 返回响应
  res.send('Your response');
});

• 协商缓存

app.get('/your-route', (req, res) => {
  // 获取资源的最后修改时间和 ETag
  const lastModified = new Date('your-last-modified-date');
  const eTag = 'your-generated-etag';
  
  // 设置 Last-Modified
  res.setHeader('Last-Modified', lastModified.toUTCString());
  
  // 设置 ETag
  res.setHeader('ETag', eTag);
  
  // 检查请求头中的 If-Modified-Since 和 If-None-Match
  const ifModifiedSince = req.headers['if-modified-since'];
  const ifNoneMatch = req.headers['if-none-match'];
  
  // 判断资源是否发生变化
  if (ifModifiedSince && ifNoneMatch) {
    if (new Date(ifModifiedSince) >= lastModified && ifNoneMatch === eTag) {
      // 返回 304 Not Modified
      res.status(304).end();
      return;
    }
  }
  
  // 返回响应
  res.send('Your response');
});

---

总结

最后用一个图总结缓存机制：