js 怎么设置http缓存

JS设置HTTP缓存的方法有：使用缓存控制标头（Cache-Control header）、ETag、Last-Modified、Expires。 其中，缓存控制标头是最常用的一种方法，它允许开发者详细指定缓存的行为，例如缓存的最大存储时间、是否必须重新验证等。通过设置这些标头，可以显著提高网站的加载速度和用户体验。

设置HTTP缓存不仅有助于提升网站的性能，还能减少服务器的负载。接下来，我们将详细探讨如何在JavaScript中设置HTTP缓存，并深入了解每种方法的具体实现和使用场景。

一、缓存控制标头（Cache-Control header）

1、什么是缓存控制标头

缓存控制标头（Cache-Control header）是HTTP/1.1引入的一个缓存机制，它允许服务器和客户端明确指定缓存的指令，从而控制资源的缓存行为。常见的指令包括 max-age、no-cache、no-store、must-revalidate 等。

2、如何设置缓存控制标头

在HTTP响应中设置 Cache-Control 标头可以通过服务器端配置实现。例如，在Node.js中，可以使用以下代码设置缓存控制标头：

const http = require('http');
http.createServer((req, res) => {
  res.setHeader('Cache-Control', 'public, max-age=3600'); // 设置缓存时间为3600秒
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<html><body><h1>Hello, World!</h1></body></html>');
}).listen(3000);

在上述示例中，我们通过 res.setHeader 方法设置了 Cache-Control 标头，指示浏览器可以缓存响应，并且缓存的有效期为3600秒。

3、常用的缓存控制指令

max-age: 指定资源的最大缓存时间（以秒为单位）。
no-cache: 强制要求缓存每次在使用该资源前重新验证其有效性。
no-store: 禁止缓存任何版本的响应。
must-revalidate: 告诉缓存必须在使用陈旧的响应前再次验证其有效性。

二、ETag

1、什么是ETag

ETag（实体标签）是HTTP/1.1引入的一种机制，用于标识特定版本的资源。当资源发生变化时，ETag值也会随之改变。浏览器在请求资源时，可以通过 If-None-Match 标头发送先前的ETag值，从而让服务器验证资源是否发生变化。

2、如何设置ETag

在Node.js中，可以使用以下代码设置ETag：

const http = require('http');
const crypto = require('crypto');
http.createServer((req, res) => {
  const body = '<html><body><h1>Hello, World!</h1></body></html>';
  const etag = crypto.createHash('md5').update(body).digest('hex');
  res.setHeader('ETag', etag);
  if (req.headers['if-none-match'] === etag) {
    res.writeHead(304);
    res.end();
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(body);
  }
}).listen(3000);

在上述示例中，我们通过计算响应内容的MD5哈希值生成ETag，并在响应头中设置该值。当浏览器发送 If-None-Match 标头时，服务器会比较ETag值，如果相同则返回304状态码，表示资源未修改。

三、Last-Modified

1、什么是Last-Modified

Last-Modified 是一个HTTP头部字段，表示资源的最后修改时间。浏览器可以在请求中通过 If-Modified-Since 头部字段发送上次请求时的最后修改时间，从而让服务器验证资源是否发生变化。

2、如何设置Last-Modified

在Node.js中，可以使用以下代码设置Last-Modified：

const http = require('http');
const fs = require('fs');
http.createServer((req, res) => {
  const filePath = './index.html';
  fs.stat(filePath, (err, stats) => {
    if (err) {
      res.writeHead(500);
      res.end('Internal Server Error');
      return;
    }
    const lastModified = stats.mtime.toUTCString();
    res.setHeader('Last-Modified', lastModified);
    if (req.headers['if-modified-since'] === lastModified) {
      res.writeHead(304);
      res.end();
    } else {
      fs.readFile(filePath, (err, data) => {
        if (err) {
          res.writeHead(500);
          res.end('Internal Server Error');
          return;
        }
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      });
    }
  });
}).listen(3000);

在上述示例中，我们通过文件的最后修改时间设置了 Last-Modified 头部字段。当浏览器发送 If-Modified-Since 头部字段时，服务器会比较最后修改时间，如果相同则返回304状态码，表示资源未修改。

四、Expires

1、什么是Expires

Expires 是一个HTTP头部字段，表示资源的过期时间。浏览器在请求资源时，如果资源的过期时间未到，则可以直接从缓存中读取资源，而不需要向服务器发送请求。

2、如何设置Expires

在Node.js中，可以使用以下代码设置Expires：

const http = require('http');
http.createServer((req, res) => {
  const expires = new Date();
  expires.setHours(expires.getHours() + 1); // 设置过期时间为1小时后
  res.setHeader('Expires', expires.toUTCString());
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<html><body><h1>Hello, World!</h1></body></html>');
}).listen(3000);

在上述示例中，我们通过 res.setHeader 方法设置了 Expires 头部字段，指示浏览器缓存的过期时间为1小时后。

五、结合使用多个缓存机制

1、为什么要结合使用

单一的缓存机制有时无法满足所有的缓存需求，通过结合使用多种缓存机制，可以实现更加灵活和高效的缓存策略。例如，可以同时使用 Cache-Control 和 ETag 来确保资源在缓存期间不被重复请求，同时又能在资源发生变化时及时更新。

2、结合使用的示例

在Node.js中，可以结合使用 Cache-Control 和 ETag：

const http = require('http');
const crypto = require('crypto');
http.createServer((req, res) => {
  const body = '<html><body><h1>Hello, World!</h1></body></html>';
  const etag = crypto.createHash('md5').update(body).digest('hex');
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.setHeader('ETag', etag);
  if (req.headers['if-none-match'] === etag) {
    res.writeHead(304);
    res.end();
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(body);
  }
}).listen(3000);

在上述示例中，我们同时设置了 Cache-Control 和 ETag 头部字段，从而实现了更为灵活和高效的缓存策略。

六、缓存策略的选择

1、如何选择合适的缓存策略

不同的缓存策略适用于不同的场景，选择合适的缓存策略需要考虑以下因素：

资源的更新频率：如果资源更新频繁，可以使用 ETag 或 Last-Modified 进行验证；如果资源更新较少，可以使用 Cache-Control 或 Expires 设置较长的缓存时间。
资源的类型：对于静态资源（如图片、CSS、JavaScript文件），可以设置较长的缓存时间；对于动态资源（如API响应），可以使用验证机制确保数据的实时性。
用户体验：缓存策略应在提升用户体验和保证数据实时性之间取得平衡。

2、常见的缓存策略示例

静态资源缓存：设置较长的缓存时间，并使用 Cache-Control 和 Expires 头部字段。
动态资源缓存：使用 ETag 或 Last-Modified 进行验证，确保数据的实时性。
API响应缓存：根据数据的实时性需求，选择合适的缓存机制，并结合使用 Cache-Control 和验证机制。

七、JavaScript中的缓存控制

1、在前端控制缓存

除了在服务器端设置缓存头部字段外，还可以在前端通过JavaScript控制缓存行为。例如，可以使用 fetch API 设置请求的缓存策略：

fetch('/api/data', {
  method: 'GET',
  cache: 'no-cache' // 禁用缓存
}).then(response => {
  return response.json();
}).then(data => {
  console.log(data);
});

在上述示例中，我们通过 fetch API 设置了 cache 选项为 no-cache，从而禁用了缓存。

2、使用Service Worker实现缓存控制

Service Worker是一种可以在后台运行的脚本，允许开发者拦截和处理网络请求，从而实现复杂的缓存策略。例如，可以使用Service Worker缓存静态资源：

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

在上述示例中，我们在Service Worker的 install 事件中缓存了静态资源，并在 fetch 事件中拦截请求，从缓存中读取资源或从网络获取资源。

八、缓存的监控和调优

1、监控缓存的效果

为了确保缓存策略的有效性，需要对缓存的效果进行监控。例如，可以使用浏览器开发者工具查看缓存的命中率和缓存的头部字段：

缓存命中率：在浏览器开发者工具的Network面板中，可以查看资源的缓存命中情况（如 200 OK (from cache)）。
缓存头部字段：在浏览器开发者工具的Network面板中，可以查看资源的缓存头部字段（如 Cache-Control、ETag、Last-Modified）。

2、调优缓存策略

根据监控结果，可以对缓存策略进行调优。例如，如果发现某些资源的缓存命中率较低，可以考虑增加缓存时间或使用验证机制；如果发现某些资源的缓存时间过长，导致数据不够实时，可以缩短缓存时间或使用更频繁的验证机制。

通过不断监控和调优缓存策略，可以在提升网站性能和保证数据实时性之间取得平衡，从而提供更好的用户体验。

九、缓存策略的最佳实践

1、合理设置缓存头部字段

根据资源的类型和更新频率，合理设置缓存头部字段。例如，对于静态资源，可以设置较长的缓存时间；对于动态资源，可以使用验证机制确保数据的实时性。

2、结合使用多种缓存机制

结合使用 Cache-Control、ETag、Last-Modified 和 Expires 等多种缓存机制，可以实现更加灵活和高效的缓存策略。

3、利用前端缓存控制

除了在服务器端设置缓存头部字段外，还可以在前端通过JavaScript控制缓存行为，例如使用 fetch API 设置请求的缓存策略，或使用Service Worker实现复杂的缓存策略。

4、监控和调优缓存策略

通过浏览器开发者工具监控缓存的效果，及时调整和优化缓存策略，确保缓存策略的有效性和合理性。

十、缓存策略的未来发展

1、新的缓存机制和标准

随着HTTP协议的发展，新的缓存机制和标准不断涌现。例如，HTTP/2引入了服务器推送（Server Push）机制，可以在客户端请求资源之前主动推送资源，从而进一步提升缓存效果。

2、缓存策略的自动化

未来，缓存策略可能会更加自动化和智能化。例如，通过机器学习算法自动调整缓存时间和验证机制，根据用户行为和资源访问模式优化缓存策略。

3、缓存策略的个性化

随着个性化需求的增加，缓存策略可能会更加注重用户个性化体验。例如，根据用户的地理位置、设备类型和访问历史等信息，动态调整缓存策略，提供更符合用户需求的缓存效果。

总之，设置HTTP缓存是提升网站性能和用户体验的重要手段。通过合理设置缓存头部字段、结合使用多种缓存机制、利用前端缓存控制、监控和调优缓存策略，可以实现更加灵活和高效的缓存策略。未来，随着新的缓存机制和标准的引入，缓存策略将变得更加自动化、智能化和个性化，为用户提供更好的体验。