浏览器强缓存和协商缓存片段如何shixian

浏览器缓存分为两种：强缓存和协商缓存。

强缓存是指浏览器在请求资源时，会先从本地缓存中查找该资源是否已经存在，并且是否过期。如果资源存在且未过期，浏览器就直接使用本地缓存中的资源，而不再向服务器发送请求，这样可以大大降低服务器的压力，提高页面加载速度。强缓存可以通过设置 HTTP 头部的 Cache-Control 和 Expires 字段来实现。

协商缓存是指当强缓存失效时，浏览器会向服务器发送请求，服务器会根据请求头中的 If-Modified-Since 和 If-None-Match 字段来判断资源是否被修改过。如果没有被修改过，服务器会返回 304 状态码，告诉浏览器可以直接使用本地缓存中的资源，否则服务器会返回最新的资源。协商缓存可以通过设置 HTTP 头部的 Last-Modified 和 ETag 字段来实现。

下面是一个示例代码片段，演示了如何在 HTTP 头部中设置缓存策略：

// 强缓存
app.get('/strong-cache', function(req, res) {
  res.setHeader('Cache-Control', 'max-age=3600'); // 1 hour
  res.send('Hello, strong cache!');
});

// 协商缓存
app.get('/conditional-cache', function(req, res) {
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Last-Modified', 'Wed, 21 Oct 2015 07:28:00 GMT');
  res.setHeader('ETag', '12345');
  
  // 如果资源未被修改过，则返回 304 状态码
  if (req.headers['if-modified-since'] === 'Wed, 21 Oct 2015 07:28:00 GMT' ||
      req.headers['if-none-match'] === '12345') {
    res.status(304);
    res.send();
  } else {
    res.send('Hello, conditional cache!');
  }
});

在以上示例中，/strong-cache 和 /conditional-cache 是两个路由，分别对应强缓存和协商缓存。在强缓存中，我们通过设置 Cache-Control 头部来指定资源的缓存时间；在协商缓存中，我们通过设置 Last-Modified 和 ETag 头部来判断资源是否被修改过，并且根据请求头中的 If-Modified-Since 和 If-None-Match 字段来返回合适的资源。