基于 cache 的性能优化实践-JavaScript中文网-JavaScript教程资源分享门户

随着互联网技术的发展，越来越多的业务逻辑都转移到前端来实现，使得前端性能优化变得更加重要。其中一种常见的性能优化实践就是基于 cache 进行优化。

什么是 cache

在计算机领域中，cache 是指一种数据缓存的技术。它可以将近期使用的数据存储在快速访问的存储设备中，以便在下一次访问时更快地获得数据。在前端领域中，cache 模式通常指的是浏览器缓存，它可以将浏览器之前访问过的资源（如 JavaScript 文件、CSS 文件、图片等）缓存到用户的本地存储介质（如硬盘、内存）中，以便在下一次访问时更快地获取资源，减少网络传输的时间。

缓存的优点

使用 cache 进行性能优化的优点有：

减少网络传输时间：使用 cache 可以减少浏览器向服务器请求资源的次数，从而减少了网络传输时间，提高了页面加载速度。
减轻服务器压力：因为浏览器可以从本地缓存中获取资源，所以服务器的负载也会减轻。
改善用户体验：使用 cache 可以让用户更快地访问网站，改善用户体验，并提高用户留存率。

缓存的种类

在浏览器缓存中，有两种常见的缓存模式：强缓存和协商缓存。

强缓存

强缓存是指当浏览器请求资源时，先检查缓存是否过期，如果未过期，直接从本地缓存中获取资源，不发送请求到服务器。

可以通过设置 HTTP 头信息来控制缓存时间：

Cache-Control：表示资源的缓存策略，默认情况下会被设置为 max-age=0，表示该资源不会被缓存。如果要使用强缓存，可以将该值设置为 max-age=xxx，表示该资源在 xxx 秒内有效。
Expires：表示资源的过期时间，它是一个 GMT 格式的日期，表示该资源将在这个日期之前过期。如果设置了 Cache-Control，Expires 头信息会被忽略。

协商缓存

协商缓存是指当缓存过期或不存在时，浏览器会发送请求到服务器，询问服务器是否有最新的资源可用。如果有，服务器返回新的资源，否则返回 304 状态码，告诉浏览器可以使用本地缓存的资源。

可以通过设置 HTTP 头信息来控制协商缓存：

Last-Modified / If-Modified-Since：表示资源的最后修改时间。第一次请求资源时，服务器会将该时间一并返回给客户端保存，下一次请求时客户端会将该值通过 If-Modified-Since 请求头发送给服务器，询问服务器该资源是否有最新的版本可用。如果服务器发现资源的最后修改时间小于或等于 If-Modified-Since 的值，就会返回 304 状态码，告诉客户端可以使用本地缓存的资源。
ETag / If-None-Match：表示一个唯一的资源标识符。当服务器响应请求时，会在响应头中添加 ETag 响应头，并将 ETag 值返回给客户端。客户端下一次请求资源时会将该值通过 If-None-Match 请求头发送给服务器，询问服务器该资源是否有最新版本可用。如果服务器发现资源的 ETag 值与 If-None-Match 的值相等，就会返回 304 状态码，告诉客户端可以使用本地缓存的资源。

协商缓存相比于强缓存要更灵活，能够更精细地控制缓存的过期时间和缓存条件。

如何使用缓存进行性能优化

在使用 cache 进行性能优化时，我们可以将常用的资源缓存到本地存储介质中，以便浏览器下一次访问时可以更快地获取这些资源。

对于数据接口的缓存

对于数据接口，我们可以使用缓存来存储查询的结果。例如，我们可以使用 LocalStorage 来存储用户最近查询的一些数据，下一次查询时，我们可以首先从本地缓存中查找是否存在符合条件的结果，如果存在，则直接返回本地缓存中的结果，避免了向服务器发起多余的请求。

// javascriptcn.com 代码示例
function fetchUserData(userId) {
  const cachedData = localStorage.getItem(userId);

  if (cachedData) {
    // 如果本地缓存中有数据，则直接返回该数据
    return Promise.resolve(JSON.parse(cachedData));
  } else {
    // 如果本地缓存中没有数据，则向服务器发起请求
    return fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        // 将查询结果存储到本地缓存中
        localStorage.setItem(userId, JSON.stringify(data));
        return data;
      });
  }
}

对于静态资源的缓存

对于静态资源，我们可以使用缓存来存储这些资源，并设置合适的缓存时间来控制缓存的有效期。当浏览器下一次请求这些资源时，直接从本地缓存中获取即可，避免了向服务器发起不必要的请求。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用缓存的静态资源</title>
  <link rel="stylesheet" href="/css/style.css?v=1.0" />
</head>
<body>
  <h1>Hello, world!</h1>
  <img src="/images/logo.png" alt="logo" />
  <script src="/js/app.js?v=1.0"></script>
</body>
</html>

在上面的例子中，我们为静态资源手动添加了版本号参数（如 ?v=1.0）。每次更改静态资源时，我们都可以增加版本号，从而让浏览器重新请求新的资源，避免了缓存旧的资源。

注意事项

在使用 cache 进行性能优化时，需要注意以下几点：

缓存最好只针对那些不会随时间变化而变化的资源，如图片、CSS 文件等。对于动态变化的内容，如用户个人信息等，最好不要缓存。
缓存时间最好设置为合适的时间，太短会增加服务器负担，太长会导致用户看到过期的数据。
在使用强缓存和协商缓存时，应该同时使用，从而兼顾缓存效率和灵活性。
在使用缓存时，应该为每个缓存设置一个唯一的键，以避免缓存冲突。

总结

使用 cache 进行性能优化是前端开发中常见的做法之一。通过合理地使用强缓存和协商缓存，可以缩短页面加载时间，提高用户体验，减轻服务器负担。在进行 cache 优化时，需要考虑缓存标识、缓存时间、缓存种类等因素，从而实现更加精细的缓存策略，提高前端性能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65461aa47d4982a6ebfe3f54