强缓存和协商缓存区别和过程

Ne￡

已于 2023-02-18 12:33:46 修改

阅读量487

点赞数 2

文章标签：前端 http缓存

于 2023-02-18 12:32:40 首次发布

本文链接：https://blog.csdn.net/weixin_45549737/article/details/128951253

版权

强缓存和协商缓存区别和过程

1.强缓存
- 1.1. 概念
- 1.2. 相关header字段
2.协商缓存
3.浏览器缓存过程（强缓存转协商缓存的过程）
4.浏览器刷新

1.强缓存

1.1. 概念

不用跟服务器进行通信，直接使用本地缓存的资源

1.2. 相关header字段

cache-control:

max-age: 当值设为max-age=300时，则代表在这个请求正确返回时间(浏览器也会记录下来)的5分钟内再次加载资源，就会命中强缓存。
no-cache：不使用本地缓存。向浏览器发送新鲜度校验请求
no-store：禁止浏览器缓存数据，也禁止保存至临时文件中，每次都重新请求，
pubilc：任何情况下都缓存（即使是HTTP认证的资源）
private：只能被终端用户的浏览器缓存，不允许CDN等中间层缓存服务器对其进行缓存。

2.协商缓存

2.1 概念

将所缓存资源的信息发送给服务器,让服务器判断资源是否已经更新了,若已更新，则返回更新后的资源；若没有更新，则返回304状态，告诉浏览器可直接使用本地缓存的资源.
整个过程至少与服务器通信一次

2.2 相关header字段

响应头： Last-Modified
请求头： If-Modified-Since ( 资源修改的时间 )

1. 浏览器第一次发请求，服务器在返回的 respone 的 header 加上 Last-Modified，
表示资源的最后修改时间

2. 再次请求资源，在 requset 的 header 加上 If-Modified-Since ，
   值就是上一次请求返回的 Last-Modified 值

3. 服务器根据请求传过来的值判断资源是否有变化，没有则返回 304，
   有变化就正常返回资源内容，更新 Last-Modified 的值

4. 304 从缓存加载资源，否则直接从服务器加载资源

响应头：Etag
请求头：If-None-Match（标识符字符串）

一个标识符字符串，表示文件唯一标识，只要文件内容改动，ETag就会重新计算。缓存流程和 Last-Modified 一样。

2.3 Last-Modified 与 Etag 的对比

如果我们打开文件但并没有修改其内容，Last-Modified 也会改变，而Etag则不会改变。
Last-Modified 的时间单位为秒，如果一秒内对文件进行了多次修改，那么由于其时间单位是秒，所以Last-Modified不会改变，最终浏览器还是会去读取缓存资源，而此时缓存的资源已经过时了。
Etag的优先级高于Last-Modified。

2.4 为什么协商缓存有两个属性一起出现

协商缓存是浏览器判断资源是否可用，所以需要两个标识，

第一个是第一次请求的响应头带上某个字段（Last-Modified或者Etag），

第二个则是后续请求带上的对应请求字段（If-Modified-Since或者If-None-Match），

两个标识一起出现才有意义，单独则没有什么效果。

3.浏览器缓存过程（强缓存转协商缓存的过程）

1.浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把文件、文件的返回时间、response header一并缓存；
2.下一次加载资源时，查看cache-control的设置
- 如果值是no-cache，则表示不缓存，则直接去请求数据；
- 如果值是max-age，则比较当前时间和上一次返回200时的时间差是否大于max-age，若小于max-age，则表示没有过期，命中强缓存，不发请求直接从本地缓存读取该文件；如果时间差大于max-age，则表示资源过期了，则向服务器发送请求，并且header中携带有If-None-Match、If-Modified-Since、Etag值等
3.如果服务器收到的请求头中，有Etag值，优先根据Etag的值判断被请求的文件有没有做修改，
- 如果Etag值一致则没有修改，命中协商缓存，返回304，则读取缓存资源；
- 如果Etag值不一致则有改动，则直接返回新的资源，并带上新的Etag值；
4.如果服务器收到的请求头中，没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，
- 如果一致则没有修改，命中协商缓存，返回304；
- 如果不一致则有修改，则返回新的文件和并在响应头中携带last-modified ，下次请求时通过If-Modified-Since携带上last-modified的值；

4.浏览器刷新

正常操作：地址栏输入url，跳转链接，前进后退等
手动刷新：F5，点击刷新按钮，右键菜单刷新
强制刷新：ctrl+F5
现象:

正常操作：强制缓存有效，协商缓存有效
手动刷新：强制缓存失效，协商缓存有效
强制刷新：强制缓存失效，协商缓存失效

问题: 有时候max-age的有效期内,如果用户手动刷新的时候,我们不想让它走协商缓存,而是直接去走强缓存
解决: 设置immutable
Cache-Control: max-age=365000000, immutable
immutable表示响应内容将一直不会改变，它和max-age是对缓存生命周期控制的互补性属性
当一个支持immutable的客户端浏览器看到这个属性时，它应该知道：如果没有超过时间上的过期失效时间，那么服务器端该页面内容将不会改变，这样浏览器就不应该再发送有条件的重新验证请求