前端项目缓存实践

介绍

配置缓存的优点，可以在一定程度上，减少服务器的处理请求压力。比如对一些图片，css或js做一些缓存，那么在每次刷新浏览器的时候，就不会重新请求了，而是从缓存里面读取。这样就可以减轻服务器的压力。

nginx可配置的缓存有2种：

1、客户端的缓存(一般指浏览器的缓存,一般有强缓存和协商缓存)。
2、服务端的缓存(使用proxy-cache实现的)。

这里我们主要说客户端的缓存。

浏览器的几种缓存

在介绍强缓存和协商缓存配置之前先介绍下浏览器的几种缓存

• 内存缓存（Form memory cache）

  • 存储位置：内存缓存存储在计算机的内存中，这意味着它的访问速度非常快，因为内存的读写速度远高于磁盘。
  • 数据量：由于内存容量有限，不是所有资源都会被缓存在内存中。通常，小型资源（如图片）和需要快速访问的资源（如JavaScript文件）更可能被缓存在内存中。
  • 时效性：内存缓存的时效性较短，当浏览器进程被释放或关闭时，缓存的资源也会被清除。
  • 优先级：内存缓存的优先级高于磁盘缓存。浏览器在寻找资源时，会首先检查内存缓存，如果找不到，再去磁盘缓存中查找。

  

• 分布式缓存(dist cache)

  • 存储位置：分布式缓存通常存储在磁盘上，但是它是通过内容分发网络（CDN）或其他分布式缓存系统在全球各地的节点上缓存的。这意味着资源可以被缓存在用户附近的节点上，从而减少网络延迟。
  • 数据量：分布式缓存可以存储大量的数据，因为它依赖于全球分布的节点。大文件和长期不变的资源（如CSS和JavaScript文件）通常会被缓存在分布式缓存中。
  • 时效性：分布式缓存的时效性通常较长，因为它依赖于HTTP响应头中的缓存控制策略。只有当资源在缓存中的有效期过期时，才需要重新从服务器获取。
  • 优先级：分布式缓存的优先级低于内存缓存。当浏览器需要加载资源时，它会首先检查内存缓存，如果找不到，再去分布式缓存中查找。

  

强缓存配置

强制缓存是指浏览器在请求资源时，根据本地缓存的有效期直接返回资源，而不需要向服务器发起请求。强制缓存的配置主要依赖于HTTP响应头中的Cache-Control和Expires字段。

• Cache-Control：这个字段可以设置缓存的最大有效期（max-age），以及是否允许缓存（public或private）。例如，Cache-Control: public, max-age=3600表示资源可以被任何缓存存储，并且在3600秒内有效。
• Expires：这个字段指定了资源的过期时间。例如，Expires: Wed, 21 Oct 2024 07:28:00 GMT表示资源在2024年10月21日07:28:00过期。

我们先看下没配置之前的数据请求

配置之后的数据请求

明显可以看到加载时间得到了大大的提升，并且Size那里变成了dist cche，表示不访问服务器，直接从磁盘里读取缓存，当我们进行强刷新时，还会从服务器中进行读取。

查看下请求头的Header,Cache-Control: max-age=10, 表示最大时间是10s, Expires: Mon, 08 Apr 2024 05:18:14 GMT是资源过期时间。

配置如图所示:

协商缓存

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串。实际上也就是Nginx配置的expires过期。

如图所示， 查看单个请求的Response Header，也能看到304的状态码和Not Modified的字符串，只要看到这个就可说明这个资源是命中了协商缓存，然后从客户端缓存中加载的，而不是服务器最新的资源。

1、Last-Modified，If-Modified-Since控制协商缓存

• 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间
• 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
• 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header
• 浏览器收到304的响应后，就会从缓存中加载资源
• 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-- - -Modified Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

2、ETag、If-None-Match控制协商缓存

• 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上ETag的header，这个header是服务器根据当前请求的资源生成的一个唯一标识，这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间没有关系，所以能很好的补充Last-Modified的问题
• 浏览器再次跟服务器请求这个资源时，在request的header上加上If-None-Match的header，这个header的值就是上一次请求时返回的ETag的值
• 服务器再次收到资源请求时，根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag，如果这两个值相同就说明资源没有变化，否则就是有变化；如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化
• 浏览器收到304的响应后，就会从缓存中加载资源。

浏览器刷新

• 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
• 当f5刷新网页时，跳过强缓存，但是会检查协商缓存