缓存策略悄悄变化，你还在用过时的技巧？

读 中高级前端工程师都需要熟悉的技能–前端缓存 有感
juejin.cn/post/712719…

观后感

前端缓存是提高网站性能和用户体验的重要手段之一。在前端中，我们可以通过设置HTTP头部信息来控制缓存的行为，常用的头部信息包括Cache-Control、Expires、Last-Modified、ETag等。同时，我们需要注意缓存的正确性、时效性和容量，以保证缓存的有效性。在使用前端缓存时，我们需要根据具体的业务场景和数据特点来设置缓存策略，避免缓存的数据不一致或者过期导致的问题。

从前端的角度来说，前端缓存主要包括浏览器缓存和本地缓存。浏览器缓存可以分为强缓存和协商缓存两种方式，强缓存是指从本地缓存中直接获取数据，而协商缓存是通过设置特定的HTTP头部信息来判断缓存是否可用。在前端中，我们可以通过使用localStorage或者sessionStorage等本地缓存技术来实现数据的持久化存储。

举个例子，假设我们有一个需求，需要在网页中显示用户的最近访问记录。如果每次都要向服务器发送请求，获取最近访问记录的数据，那么网页的加载速度将会很慢，用户体验也会受到影响。这时，我们可以使用localStorage来实现数据的本地缓存。当用户第一次访问网页时，我们可以将最近访问记录保存在localStorage中，当用户再次访问网页时，直接从localStorage中获取数据，而不必再向服务器发送请求，从而提高网页的加载速度和用户体验。

从后端的角度来说，前端缓存主要包括服务器端缓存和浏览器端缓存。在服务器端，我们可以使用页面缓存、对象缓存、查询缓存等缓存技术来优化Web应用程序的性能。在浏览器端，我们可以通过设置HTTP头部信息来控制浏览器缓存。通过合理使用前端缓存，我们可以减少向服务器发送请求的次数，提高网站的性能和用户体验。

举个例子，假设我们有一个Web应用程序，需要根据用户的输入进行查询，返回查询结果。如果每次都要重新计算查询结果，那么Web应用程序的性能将会很差。这时，我们可以使用对象缓存来缓存查询结果，当用户再次进行相同的查询时，直接从缓存中获取结果，而不必重新计算，从而提高Web应用程序的性能和用户体验。同时，我们可以使用页面缓存来缓存整个Web页面，从而减少页面加载的时间，提高用户的访问速度和体验。

需要注意的是，缓存的正确性、时效性和容量是前端缓存的关键问题。如果缓存的数据不一致或者过期，那么将会导致应用程序的错误行为。因此，我们需要根据具体的业务场景和数据特点来设置缓存策略，保证缓存的有效性和正确性。另外，缓存的容量也需要根据实际情况来设置，避免缓存数据过多导致浏览器性能的下降。

总之，前端缓存是提高网站性能和用户体验的重要手段之一。在前端中，我们可以通过设置HTTP头部信息来控制缓存的行为，常用的头部信息包括Cache-Control、Expires、Last-Modified、ETag等。同时，我们需要注意缓存的正确性、时效性和容量，以保证缓存的有效性。在使用前端缓存时，我们需要根据具体的业务场景和数据特点来设置缓存策略，避免缓存的数据不一致或者过期导致的问题。通过合理使用前端缓存，我们可以大大提高网站的性能和用户体验，让用户不再为缓慢的网站而烦恼。

1. 强缓存代码示例

// 设置缓存过期时间为1小时
res.setHeader('Cache-Control', 'max-age=3600');
res.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());

// 判断是否从缓存中获取数据
const cachedData = getCachedData();
if (cachedData) {
  // 返回缓存数据
  res.send(cachedData);
} else {
  // 发送请求获取数据，并将数据缓存起来
  fetchData().then((data) => {
    cacheData(data);
    res.send(data);
  });
}

在上述代码中，我们通过设置Cache-Control和Expires头部信息来实现强缓存。当浏览器再次请求同样的资源时，会从本地缓存中获取数据，而不必向服务器发送请求。

2. 协商缓存示例代码：

// 判断缓存是否可用
const cachedData = getCachedData();
const lastModified = getLastModified();
const etag = getEtag();
if (cachedData && lastModified && etag) {
  if (req.headers['if-none-match'] === etag && req.headers['if-modified-since'] === lastModified) {
    // 返回304 Not Modified状态码，表示缓存可用
    res.status(304).end();
    return;
  }
}

// 发送请求获取数据，并设置Last-Modified和ETag头部信息
fetchData().then((data) => {
  const newData = processData(data);
  setLastModified(new Date().toUTCString());
  setEtag(getHash(newData));
  res.send(newData);
});

在上述代码中，我们通过设置Last-Modified和ETag头部信息来实现协商缓存。当浏览器再次请求同样的资源时，会向服务器发送If-None-Match和If-Modified-Since头部信息，服务器会根据这些信息来判断是否需要返回304 Not Modified状态码，表示缓存可用。

需要注意的是，不同的缓存策略有不同的实现方式，以上示例只是一种常见的实现方式，具体实现应该根据具体场景进行调整。