JavaScript面试中需要了解的缓存相关知识有哪些？

在 WEB 开发中，缓存是一个非常重要的概念。当我们处理大量数据或者频繁地进行网络请求时，缓存能够帮助我们提高网站的性能和用户体验。同时，在 javascript 面试中，缓存也是一个非常常见的考点。在本文中，我们将介绍一些 JavaScript 面试中需要了解的缓存相关知识。

一、浏览器缓存

浏览器缓存是指浏览器在本地存储网页资源，以便在下一次访问同一个网页时能够快速地加载资源。浏览器缓存可以分为两种：强缓存和协商缓存。

1. 强缓存

强缓存是指在一定时间内，浏览器直接从本地缓存中加载资源，而不向服务器发送请求。强缓存可以通过设置 Http 头信息来实现。常见的 HTTP 头信息有：

• Expires：指定一个过期时间，当浏览器发现本地缓存的资源过期时，才会向服务器发送请求。但是 Expires 的缺点是，它的过期时间是一个绝对时间，如果服务器时间和客户端时间不一致，就会出现问题。
• Cache-Control：可以设置多种缓存策略，常见的有 no-cache、no-store、max-age 等。其中，no-cache 表示每次都需要向服务器发送请求，而 no-store 则表示禁止缓存，每次都需要重新加载资源。max-age 表示资源可以缓存的最长时间，单位为秒。

下面是一个设置 Cache-Control 的例子：

app.get("/index.js", (req, res) => {
  res.setHeader("Cache-Control", "max-age=3600");
  res.sendFile(path.join(__dirname, "public/index.js"));
});

在上面的例子中，我们将 index.js 这个资源的缓存时间设置为 3600 秒。

2. 协商缓存

协商缓存是指浏览器在本地缓存过期后，向服务器发送请求，询问该资源是否有更新。如果服务器返回的响应头信息中包含了 Etag 或者 Last-Modified，浏览器就会根据这些信息来判断资源是否有更新。如果资源没有更新，服务器会返回 304 Not Modified，浏览器就会从本地缓存中加载资源。

下面是一个设置 Etag 的例子：

app.get("/index.js", (req, res) => {
  const content = fs.readFileSync(path.join(__dirname, "public/index.js"), "utf-8");
  const etag = crypto.createHash("md5").update(content).digest("hex");
  res.setHeader("Etag", etag);
  res.sendFile(path.join(__dirname, "public/index.js"));
});

在上面的例子中，我们通过 crypto 模块计算了 index.js 这个资源的 Etag，并将其设置到响应头信息中。

二、内存缓存

内存缓存是指将数据存储在内存中，以便在下一次访问时能够快速加载数据。在 JavaScript 中，我们可以通过变量和函数的返回值来实现内存缓存。

下面是一个使用变量实现内存缓存的例子：

function getData() {
  if (!getData.cache) {
    getData.cache = "这是缓存的数据";
  }
  return getData.cache;
}

在上面的例子中，我们使用了一个 getData.cache 变量来保存数据。当第一次调用 getData 函数时，会将数据保存到 cache 变量中。当第二次调用 getData 函数时，就可以直接从 cache 变量中加载数据，而不需要重新计算。

三、LocalStorage 和 SessionStorage

LocalStorage 和 SessionStorage 是浏览器提供的两种本地存储方式。它们可以将数据存储在浏览器中，以便在下一次访问时能够快速加载数据。不同的是，LocalStorage 中的数据会一直保存在浏览器中，直到用户手动清除缓存，而 SessionStorage 中的数据只会在当前会话中保存，关闭浏览器后就会被清除。

下面是一个使用 LocalStorage 实现缓存的例子：

function getData() {
  const data = localStorage.getItem("data");
  if (data) {
    return JSON.parse(data);
  }
  const newData = "这是缓存的数据";
  localStorage.setItem("data", JSON.stringify(newData));
  return newData;
}

在上面的例子中，我们使用了 LocalStorage 来保存数据。当第一次调用 getData 函数时，会尝试从 LocalStorage 中加载数据。如果数据存在，就返回数据；如果数据不存在，就重新计算并将数据保存到 LocalStorage 中。

总结

缓存是 Web 开发中非常重要的一个概念，它可以帮助我们提高网站的性能和用户体验。在 JavaScript 面试中，缓存也是一个非常常见的考点。本文介绍了一些 JavaScript 面试中需要了解的缓存相关知识，包括浏览器缓存、内存缓存、LocalStorage 和 SessionStorage 等。希望本文能够帮助大家更好地理解缓存的概念和实现方式。