【建站】应用浏览器缓存

相关文章

• 安装nginx
• 安装mongodb
• 安装nodejs
• 应用gzip
• 部署egg项目
• 应用浏览器缓存
• 解决nodejs18+下lib库问题

应用浏览器缓存

---

系统环境

• 技术栈：Vue 3.x
• nginx：v1.22.1

一、配置浏览器缓存

1、配置 nginx

在 Nginx 配置文件中的 location 块中设置 expires 指令，来指定缓存资源的过期时间。例如：

location ~* ^.+\.(css|js|svg|gif|jpg|jpeg|png|ttf)$ {
    expires 7d; # 缓存静态资源 7 天
}

个数不限制，如有需要，可配置多个

2、其他的配置方式

• 使用 Cache-Control： 可以通过在 Nginx 配置文件中的 location 块中设置 add_header 指令，来添加 Cache-Control 响应头字段，以指定缓存的行为和属性。例如：

  location /static {
      add_header Cache-Control "public, max-age=86400";  # 缓存静态资源 1 天
  }

• 设置 Last-Modified 和 ETag： 可以通过在 Nginx 配置文件中的 location 块中设置 etag 指令和 last_modified 指令，来添加 Last-Modified 和 ETag 响应头字段，以支持协商缓存。例如：

  location /static {
      etag on;
      last_modified on;
  }

• 使用 proxy_cache： 如果 Nginx 作为反向代理服务器，可以使用 proxy_cache 指令来配置代理缓存，以缓存后端服务器返回的响应结果。例如：

  location /api {
      proxy_pass http://backend_server;
      proxy_cache my_cache;
      proxy_cache_valid 200 302 1h;  # 缓存成功响应 200 和 302 状态码的响应 1 小时
  }

3、重启 nginx

# /usr/local/nginx/sbin/nginx -s reload

4、验证是否生效

打开 DevTools 工具，显示Cache-Control字段，就可以看到最大缓存的时间了

或者直接查看某请求的响应

二、常见问题

1、nginx 配置缓存后，访问资源出现 404

检查当前server模块是否有root（或者可继承的）配置

2、协商缓存是否需要手动启用

• 协商缓存通常不需要手动启用，它是由浏览器和服务器之间的通信过程自动进行的。

• 当浏览器发送一个请求到服务器时，它会检查本地缓存是否包含该资源的副本，并根据缓存的情况决定是否向服务器发起请求。如果缓存失效或者不存在，浏览器会向服务器发送请求，服务器则会根据资源的修改时间（Last-Modified）或者实体标签（ETag）来判断资源是否已经改变。

• 如果资源未被修改，服务器将返回一个状态码为 304 Not Modified 的响应，并在响应头中包含新的 Last-Modified 或 ETag 值，以及其他与缓存相关的信息。浏览器收到这个响应后，将会使用缓存的副本，并根据新的缓存标识（Last-Modified 或 ETag）更新本地缓存。

• 因此，协商缓存是由浏览器和服务器之间的交互自动完成的，不需要手动启用。但是，你可以通过合理设置响应头中的 Last-Modified 和 ETag 字段来控制资源的协商缓存行为，以提高缓存的效率和命中率。

三、知识拓展

1、Web 缓存主要分为以下几种类型

• 浏览器缓存： 浏览器缓存是指浏览器在本地存储已访问过的 Web 资源的副本，以便在用户再次访问相同的资源时能够快速加载。浏览器缓存通常包括两种类型：强缓存和协商缓存。

  • 强缓存：浏览器在请求资源时先检查本地缓存，如果缓存有效（即尚未过期），则直接使用缓存的资源，不向服务器发送请求。
  • 协商缓存：如果缓存失效或不存在，浏览器会向服务器发送请求，服务器会根据资源的修改时间（Last-Modified）或者 ETag（实体标签）来判断资源是否已经改变，如果未改变，则返回 304 Not Modified 状态码，告诉浏览器继续使用缓存的资源。

• CDN 缓存： CDN（内容分发网络）是一种将内容缓存在全球分布的服务器上，以提供更快的内容交付服务的网络。CDN 服务器会缓存静态资源（如图片、视频、CSS、JavaScript 等）的副本，并将这些资源存储在靠近用户的边缘节点上，从而减少数据传输时间和网络延迟。

• 反向代理缓存： 反向代理服务器（如 Nginx 等）是位于客户端和原始服务器之间的中间服务器，它可以缓存来自原始服务器的响应，以及处理来自客户端的请求。反向代理缓存可以减轻原始服务器的负载，并加快网站的响应速度。

• Web 服务器缓存： Web 服务器（如 Apache 等）可以缓存静态和动态内容的副本，以减少对后端应用程序服务器的请求。这种缓存通常用于存储动态页面的渲染结果、数据库查询结果等。

• 数据库缓存： 数据库缓存是指将数据库查询结果存储在内存中，以减少对数据库服务器的查询次数和响应时间。常见的数据库缓存技术包括 Redis、Memcached 等。

这些类型的缓存可以结合使用，以提高 Web 应用程序的性能和可扩展性，减少网络延迟和服务器负载。

2、 缓存指令（Cache-directive）字典

请求头中的缓存指令	说明
no-cache	指示客户端不要使用缓存的副本，而是要向原始服务器发起请求，并在获取到响应后将响应缓存起来。
no-store	指示客户端不要存储任何与此请求/响应有关的内容，包括在私有缓存中。
max-age=<seconds>	指示客户端可以接收的最大缓存时间（以秒为单位），超过此时间后客户端必须重新验证资源。
max-stale=<seconds>	指示客户端可以接收过期时间超过当前时间一段时间的响应。可选参数指定允许的最大过期时间。
min-fresh=<seconds>	指示客户端希望在缓存过期前至少还能保持指定的新鲜度（以秒为单位）。
only-if-cached	指示客户端只接收缓存的响应，并且不要向原始服务器发起请求。
must-revalidate	指示客户端必须在使用缓存的副本之前重新验证缓存的有效性。
proxy-revalidate	指示缓存服务器必须在使用缓存的副本之前重新验证缓存的有效性。

请求头中的缓存指令	说明
public	表示响应可以被任何缓存（包括客户端和代理服务器）缓存。
private	表示响应只能被客户端缓存，而不能被代理服务器缓存。
no-cache	表示响应可以被缓存，但在使用之前必须重新验证缓存的有效性。
no-store	表示响应不能被存储在任何缓存中。
max-age=<seconds>	指示响应可以被缓存的最大时间（以秒为单位）。
s-maxage=<seconds>	类似于 max-age，但只适用于代理服务器缓存。
must-revalidate	表示客户端必须在使用缓存的副本之前重新验证缓存的有效性。
proxy-revalidate	表示代理服务器必须在使用缓存的副本之前重新验证缓存的有效性。
immutable	表示资源在缓存过程中不会发生变化，可以永久缓存。