强制缓存和协商缓存

当浏览器请求一个资源时，该资源可以缓存到客户端（浏览器）中，以便以后重复使用。浏览器缓存是一种可以显著提高Web应用程序性能的技术，但它可能会导致某些问题，例如在更新资源时无法及时获取最新版本。在这种情况下，我们可以使用浏览器缓存策略来强制或协商缓存资源。

强制缓存

强制缓存是指在浏览器请求资源时，如果该资源已经存在于本地缓存中并且缓存未过期，浏览器将不会向服务器发送请求，直接使用本地缓存中的资源。这样可以提高页面加载速度并减轻服务器负担。
在HTTP响应头中，我们可以通过设置Cache-Control和Expires头来控制强制缓存。当浏览器请求资源时，将首先检查这些头的值，以决定是否使用本地缓存。
● Cache-Control：Cache-Control是HTTP / 1.1中最常用的缓存控制头。它指定如何缓存响应以及缓存时间。如果服务器发送了一个响应头Cache-Control: max-age=31536000，则表示该资源可以缓存一年，并且在一年内，如果请求同一个资源，浏览器将直接使用本地缓存。max-age表示缓存时间的秒数。
● Expires：Expires头指定资源过期的日期和时间。如果服务器发送了一个响应头Expires: Fri, 31 Dec 9999 23:59:59 GMT，则表示该资源将在公元9999年12月31日23:59:59过期。当请求同一个资源时，如果当前时间在过期时间之前，浏览器将直接使用本地缓存。
以下是一个强制缓存的示例：：

const express = require('express');
const app = express();

app.use(express.static('public', {
  maxAge: '1h', // 缓存1小时
  etag: false, // 禁用ETag
  lastModified: false, // 禁用Last-Modified
}));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在此示例中，我们使用了Express框架的静态文件中间件来指定公共文件夹public作为存储静态文件的目录，并且将maxAge设置为1小时。我们还禁用了ETag和Last-Modified头，这些头通常用于协商缓存。这将导致浏览器强制缓存文件，直到缓存过期。

协商缓存

协商缓存是指浏览器向服务器发送请求，但服务器会返回一个304 Not Modified响应，告诉浏览器该资源未被修改，可以继续使用缓存。协商缓存使用Last-Modified和ETag头来实现。
Last-Modified头指定资源的最后修改时间，服务器在返回响应时将其发送给客户端。下次请求时，浏览器将在If-Modified-Since头中包含上次的Last-Modified值，并发送到服务器。如果资源未被修改，服务器将返回一个304 Not Modified响应，浏览器将使用本地缓存。这种方法的缺点是，如果资源在最后修改后立即更新，但Last-Modified仍然相同，则无法正确检测到更改。
ETag是一个字符串标识符，由服务器分配给每个资源。当客户端请求资源时，服务器将ETag发送给客户端。下次请求时，浏览器将在If-None-Match头中包含上次的ETag值，并发送到服务器。如果ETag未更改，服务器将返回一个304 Not Modified响应，浏览器将使用本地缓存。相比于Last-Modified，ETag更准确地检测到更改，但通常需要更多的服务器资源来计算。
以下是一个协商缓存的示例，其中资源使用ETag头进行协商缓存：

const express = require('express');
const app = express();

const etag = require('etag');

app.get('/hello', (req, res) => {
  const content = 'Hello, world!';
  const hash = etag(content);

  res.set({
    'ETag': hash,
    'Cache-Control': 'no-cache',
  });

  if (req.headers['if-none-match'] === hash) {
    res.status(304).end();
  } else {
    res.send(content);
  }
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在此示例中，我们使用Express框架的路由来处理GET /hello请求。我们使用ETag库来计算内容的哈希值，并在响应中包含ETag头。我们还设置了Cache-Control头为no-cache，这将使浏览器每次都发送请求，以便进行协商缓存。在处理请求时，我们检查If-None-Match头是否与哈希值匹配，如果匹配，则返回304 Not Modified响应，否则返回内容。