浏览器缓存机制

浏览器缓存是指浏览器在访问网站时将一些数据（如网页、图片、脚本等）存储在本地，以便在下次访问同一网站时能够更快地加载这些数据，提高用户体验。

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

强缓存是指浏览器在第一次请求资源时，如果服务器返回的响应头中包含了缓存标识，并且本地缓存未过期，那么浏览器将直接从缓存中加载资源，不会向服务器发送请求。常见的缓存标识有：Expires 和 Cache-Control。

协商缓存是指浏览器在第一次请求资源时，如果服务器返回的响应头中包含了 Last-Modified 或 ETag，那么浏览器将会记录这些信息。下次请求时，浏览器会在请求头中携带 If-Modified-Since 或 If-None-Match 字段，将上次记录的信息发送给服务器。服务器收到请求后，根据这些信息判断资源是否被修改，如果未被修改，则返回 304 状态码，告诉浏览器可以使用本地缓存。否则，返回新的资源并更新缓存。

浏览器缓存的好处是可以提高网站加载速度，降低服务器负载，减少网络流量，节省用户流量费用。但如果缓存设置不当，可能会导致浏览器缓存过期后仍然使用旧的资源，影响网站的更新和维护。

前端实现浏览器缓存的代码：

// 强缓存
// Expires 方式
const cacheExpiresTime = new Date(Date.now() + 3600 * 1000).toUTCString(); // 设置缓存有效期为1小时
res.setHeader('Expires', cacheExpiresTime);
res.setHeader('Cache-Control', 'max-age=3600');

// 协商缓存
const fileStat = fs.statSync(filePath);
const lastModified = fileStat.mtime.toUTCString();
res.setHeader('Last-Modified', lastModified);
const fileEtag = crypto.createHash('md5').update(fs.readFileSync(filePath)).digest('hex');
res.setHeader('ETag', fileEtag);

// 判断是否命中缓存
const ifModifiedSince = req.headers['if-modified-since'];
const ifNoneMatch = req.headers['if-none-match'];
if (ifModifiedSince === lastModified && ifNoneMatch === fileEtag) {
  res.statusCode = 304;
  res.end();
  return;
}

// 缓存未命中，返回新资源
res.setHeader('Last-Modified', lastModified);
res.setHeader('ETag', fileEtag);
res.setHeader('Cache-Control', 'max-age=3600');
res.statusCode = 200;
res.end(fileData);

这里只是简单地示范了如何实现浏览器缓存，实际应用中，还需要考虑缓存策略的具体设置、缓存数据的更新和失效等问题。