大家都能听懂的 http 缓存 讲解

http 缓存 目的是将资源放在浏览器端，减轻服务端的压力

我觉得这篇文章大家都能听懂

• http 缓存分为两种：强制缓存 和 协商缓存

强制缓存：

• 无需和服务器端通信

一般使用Cache-Control 即可，使用Expires是为了兼容低版本浏览器

有了Expires 为啥还要有 Cache-Control 嘞：为了防止客户端和浏览器端，时间不一致不要忘了我们是可以修改自己电脑的时间的!!

Cache-Control 有如下属性

•       no-cache: 强制进行协商缓存（注意和 no-store 区分）

       no-store：不缓存

       public: 表示资源可以被代理服务器缓存

       private： 表示资源不可被代理服务器缓存

协商缓存

      写在前面：  注意协商缓存需要配合使用 Cache-Control

        加入强缓存过期，怎么办，或者 Cache-Control 设置为 no-store

        这就需要和服务器协商一下了

        浏览器： 服务器大哥 我这边显示 Cache-Control 设为 no-store

        服务器： 我知道了，我看看资源（如：image,css,js等）有没有改，没改的话你用原来的就好了，给返回 304状态码，如果更新了给你返回 200 状态码

      协商缓存需要用到两个字段：Last-Modified 和 Etag （单独配置一种也可以的，并不是非要两个都有）

•           首先出现的的是 Last-Modified,那后来又为啥出现了Etag 呢？
•            这是因为 Last-Modified 的两个问题
  •                    1.即使我们文件内容没有变化，只改了一个文件名 例如我们在服务器端把 1.JPG 改                  为 2.JPG,浏览器再次请求时，服务器就会认为资源发生了变动，重新返回内容，造成网 
  •            络资源的浪费        
•                   2.即使我们改动了内容，如我们在200ms 内向a.txt 写入了内容，因为使用Last-                         Modified的时候，只能监听到秒级 以上的文件修改，所以会认为a.txt 内容并没有发生改变
•  
  •         所以我们需要Etag
    •         

         第一次请求服务器端返回两个字段  Last-Modified 和 Etag (如果该资源需要配置 Last-Modified 和 Etag字段的话，若不需要返回其中一个即可)       

        注：服务器端有 api 判断文件是否会被修改，获取修改的时间

           

       第二次请求的时候，会在请求头上加上两个字段 if-modified-since 和 if-none-match

        if-modified-since 对应 Last-Modify 的值

         if-none-match 对应 Etag 的值

     服务器收到 if-modified-since 后，会获取资源上次修改的时间 和 if-modified-since  比较 如果相同返回 304 状态码

      服务器收到if-none-match 的值后，,会获取文件指纹 即Etag 的值 与 if-none-match 比较，如果一样返回 304。如果不同返回200

注意：设置缓存的时候并不需要 把 Last-Modify 和 Etag 两种缓存策略都用上，根据需要使用即可

最后推荐B站一个老师的视频讲的很清楚，我不过拾人牙慧，如有错误请指出

HTTP 缓存精讲_哔哩哔哩_bilibili