js http缓存怎么设置

JS HTTP缓存的设置方法包括：使用缓存控制头部、设置过期时间、使用ETag验证、配置Last-Modified头部。其中，使用缓存控制头部是最常用且高效的一种方法。通过在HTTP响应中设置合适的缓存控制头部，可以明确客户端和中间缓存如何缓存和重新验证资源。接下来，我们将详细探讨如何在JS中有效设置HTTP缓存，以优化网页性能。

一、缓存控制头部

缓存控制头部（Cache-Control）是HTTP/1.1中用于管理缓存的主要机制。它允许服务器通过响应头部向客户端传递缓存指令。

1. 使用Cache-Control头部

Cache-Control头部的常用指令包括：

no-store：不缓存响应。
no-cache：缓存响应，但每次使用前必须与服务器验证。
private：只能由客户端缓存。
public：可以被任何缓存（包括CDN等）缓存。
max-age：指定资源的最大缓存时间（以秒为单位）。

例如，在服务器端代码中可以这样设置：

response.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时

通过合理设置Cache-Control头部，可以显著提升页面加载速度和用户体验。

二、设置过期时间

Expires头部是HTTP/1.0中用于指定资源过期时间的机制。尽管Cache-Control头部在HTTP/1.1中更常用，Expires头部仍然兼容并适用于一些旧的浏览器。

1. 使用Expires头部

Expires头部的值是一个HTTP日期格式的时间点：

response.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString()); // 缓存1小时

该头部明确指定了资源过期的时间点，超过此时间后客户端必须重新请求资源。

三、ETag验证

ETag（Entity Tag）是HTTP协议中的一个机制，用于资源版本管理。服务器可以通过ETag标识资源的版本变化，客户端则通过If-None-Match请求头部向服务器验证资源是否已变更。

1. 使用ETag头部

服务器生成和返回ETag：

const etag = generateETag(resourceContent);
response.setHeader('ETag', etag);

客户端在下次请求时会带上If-None-Match头部：

if (request.headers['if-none-match'] === etag) {
  response.statusCode = 304; // 资源未变更
  response.end();
} else {
  // 返回更新后的资源
}

通过ETag机制可以有效减少不必要的资源传输，节省带宽并提升性能。

四、配置Last-Modified头部

Last-Modified头部用于指示资源的最后修改时间，客户端可以通过If-Modified-Since请求头部向服务器验证资源是否已变更。

1. 使用Last-Modified头部

服务器设置Last-Modified头部：

const lastModified = fs.statSync(resourcePath).mtime.toUTCString();
response.setHeader('Last-Modified', lastModified);

客户端在下次请求时会带上If-Modified-Since头部：

if (new Date(request.headers['if-modified-since']) >= new Date(lastModified)) {
  response.statusCode = 304; // 资源未变更
  response.end();
} else {
  // 返回更新后的资源
}

与ETag类似，Last-Modified头部也能减少不必要的资源传输。

五、结合使用缓存机制

为了充分利用HTTP缓存机制，可以结合使用上述方法。例如，既设置Cache-Control头部，也设置ETag或Last-Modified头部，以确保在不同场景下都能高效缓存。

1. 示例代码

以下是一个综合使用上述缓存机制的示例代码：

const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, 'static', req.url);
  const stat = fs.statSync(filePath);
  const lastModified = stat.mtime.toUTCString();
  const etag = generateETag(fs.readFileSync(filePath));
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString());
  res.setHeader('Last-Modified', lastModified);
  res.setHeader('ETag', etag);
  if (req.headers['if-none-match'] === etag || new Date(req.headers['if-modified-since']) >= new Date(lastModified)) {
    res.statusCode = 304;
    res.end();
  } else {
    res.statusCode = 200;
    fs.createReadStream(filePath).pipe(res);
  }
});
function generateETag(content) {
  // 简单的ETag生成函数，实际应用中应使用更可靠的方法
  return `"${require('crypto').createHash('md5').update(content).digest('hex')}"`;
}
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

上述示例代码展示了如何结合使用Cache-Control、Expires、Last-Modified和ETag头部来实现高效的HTTP缓存管理。

六、缓存策略的选择

根据不同的应用场景和需求，选择合适的缓存策略至关重要。以下是几种常见的缓存策略：

1. 静态资源缓存

对于JavaScript、CSS、图片等静态资源，通常建议设置较长的缓存时间，例如：

response.setHeader('Cache-Control', 'public, max-age=31536000'); // 缓存1年

同时，可以结合ETag或版本号机制确保更新后的资源能及时生效。

2. 动态内容缓存

对于动态生成的内容，可以使用较短的缓存时间或仅使用ETag/Last-Modified机制。例如：

response.setHeader('Cache-Control', 'no-cache');

这样可以确保每次请求时都与服务器进行验证，保证内容的实时性。

七、结合前端缓存策略

除了服务器端的缓存设置，前端也可以通过Service Worker等技术进一步优化缓存策略。例如，利用Service Worker缓存API请求和页面资源，实现更高效的离线支持和性能优化。

1. 使用Service Worker缓存

以下是一个简单的Service Worker缓存示例：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/script.js',
      ]);
    })
  );
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

通过结合服务器端和客户端的缓存策略，可以实现更全面和高效的缓存管理。

八、总结

在现代Web开发中，合理设置HTTP缓存策略是提升网页性能和用户体验的重要手段。通过使用缓存控制头部、设置过期时间、ETag验证和Last-Modified头部等方法，可以有效管理资源缓存。结合前端技术如Service Worker，可以进一步优化缓存策略，实现更高效的资源加载和页面响应。希望通过本文的详细介绍，能够帮助开发者更好地掌握HTTP缓存的设置和优化方法。