热点面试题：协商缓存和强缓存的理解及区别？

前言

极度投入，深度沉浸，边界清晰

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~

欢迎关注 『非同质前端札记』 公众号 ，一起探索学习前端技术......

公众号回复 加群 或 扫码, 即可加入前端交流学习群，长期交流学习......

公众号回复 加好友，即可添加为好友

协商缓存和强缓存的理解及区别？

协商缓存：

• 缓存策略：如果命中强制缓存，无需发起新的请求，直接使用缓存，如果没有命中强制缓存，如果设置了协商缓存，这采用协商缓存,在使用协商缓存时，会先向服务器发起一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地缓存副本，如果资源发生了修改，则返回修改后的资源。
• 命中方式：
  1. max-age=xxx 过期了
  2. Cache-Control 值为 no-store
• 设置方式：http 头信息中
  1. Etag: 因为 Last-Modified 的这种可能发生的不准确性，http 中提供了另外一种方式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。在下一次资源请求时，浏览器会在请求头中添加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较，以此来判断资源是否发生改变，是否需要返回资源。通过这种方式，比 Last-Modified 的方式更加精确。
  2. Last-Modified：服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。如果资源已经被修改了，则返回修改后的资源。使用这种方法有一个缺点，就是 Last-Modified 标注的最后修改时间只能精确到秒级，如果某些文件在 1 秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。
  • 注意点：当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag 属性。

强缓存：

• 缓存策略：如果缓存资源有效，则直接使用缓存资源，不再向服务器重新请求
• 设置方式：http 头信息中
  1. Expires 属性：指定资源的过期时间。这个时间是一个绝对时间，也就是服务器的时间，如果服务器时间与客户端的时间不一致，则会影响缓存命中的结果。
  2. Cache-Control 属性：因为 Expires 属性的缺点，在 http1.1 中提出了这个新属性，它能更精确的控制资源的缓存。
     • public：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用 max-age 来精确控制；
     • private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的 HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存；
     • no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；
     • no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；
     • max-age：设置缓存的最大有效期，单位为秒；
     • s-maxage：优先级高于 max-age，仅适用于共享缓存(CDN)，优先级高于 max-age 或者 Expires 头；
     • max-stale[=]：设置了该字段表明客户端愿意接收已经过期的资源，但是不能超过给定的时间限制。

no-cache 和 no-store 的区别？

1. no-cache：先向服务器确认当前资源是否有更新，在进行判断是否使用缓存资源。也就是说没有强缓存，但是会有协商缓存
2. no-store：指不适用任何缓存，每次请求都会向服务器获取最新资源。

两者区别：

• 强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求以此来确认是否使用缓存。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

文章特殊字符描述：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项标准：A:(attention matters)
4. 详情描述标注：D:(detail info)
5. 总结标注：S:(summary)
6. 分析标注：Ana:(analysis)
7. 提示标注：T:(tips)

往期回顾：

• 热点面试题：Virtual DOM 相关问题？https://mp.weixin.qq.com/s/s3BBhTH9g2OrtOpyJ4tzbQ
• 热点面试题：什么是粘包/半包问题，该如何解决？https://mp.weixin.qq.com/s/SORAN1c0_Pntajvjl-jK4g
• 热点面试题：console.log()同异步问题？https://mp.weixin.qq.com/s/9ewYuCazPaZhDHwrfIWxTQ
• 热点面试题：进程系列问题？https://mp.weixin.qq.com/s/J5ayE5XJElBFzn38qo7ytQ
• 热点面试题：Node.js 中的垃圾回收机制？https://mp.weixin.qq.com/s/Guku1ARej2ZHwnrbXxmJJA
• 热点面试题：简述 http3.0~http1.0 分别有什么改进？https://mp.weixin.qq.com/s/LkOWiDj5O68T85-577_UPA
• JavaScript中的AMD和CMD规范https://mp.weixin.qq.com/s/LkOWiDj5O68T85-577_UPA
• Vue数据监听Object.definedProperty()方法的实现https://mp.weixin.qq.com/s/1inW5dSZv26eJTC39REMdg

最后：

• 欢迎关注 『非同质前端札记』 公众号 ，一起探索学习前端技术......
• 公众号回复 加群 或 扫码, 即可加入前端交流学习群，长期交流学习......
• 公众号回复 加好友，即可添加为好友