[深入07] 浏览器缓存机制（http缓存机制）

导航

[[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
[[深入04] 事件循环](https://juejin.im/post/684490...
[[深入05] 柯里化 偏函数 函数记忆](https://juejin.im/post/684490...
[[深入06] 隐式转换 和 运算符](https://juejin.im/post/684490...
[[深入07] 浏览器缓存机制（http缓存机制）](https://juejin.im/post/684490...
[[深入08] 前端安全](https://juejin.im/post/684490...
[[深入09] 深浅拷贝](https://juejin.im/post/684490...
[[深入10] Debounce Throttle](https://juejin.im/post/684490...
[[深入11] 前端路由](https://juejin.im/post/684490...
[[深入12] 前端模块化](https://juejin.im/post/684490...
[[深入13] 观察者模式 发布订阅模式 双向数据绑定](https://juejin.im/post/684490...
[[深入14] canvas](https://juejin.im/post/684490...
[[深入15] webSocket](https://juejin.im/post/684490...
[[深入16] webpack](https://juejin.im/post/684490...
[[深入17] http 和 https](https://juejin.im/post/684490...
[[深入18] CSS-interview](https://juejin.im/post/684490...
[[深入19] 手写Promise](https://juejin.im/post/684490...
[[深入20] 手写函数](https://juejin.im/post/684490...

[[react] Hooks](https://juejin.im/post/684490...

[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...

[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
[[源码-vue01] data响应式 和 初始化渲染 ](https://juejin.im/post/684490...
[[源码-vue02] computed 响应式 - 初始化，访问，更新过程 ](https://juejin.im/post/684490...

缓存的重要性

• 一个优秀的缓存策略，可以缩短网页请求资源的距离，减少延迟，缓存文件可以重复利用所以还可以减少带宽，降低网路负荷

浏览器缓存

• 浏览器启用缓存的优点：减少页面加载时间，减少服务器负载

• <font color=red>浏览器是否使用缓存，缓存多久，是由服务器控制的</font>

  • 即服务器响应的 <font color=red>响应头</font> 中，某些字段指明了缓存的关键信息

• 通用首部字段

  • 请求和响应都能用的字段
  • Cache-Control

• 请求首部字段

  • If-None-Match
  • If-Modified-Since

• 响应首部字段

  • ETag

• 实体首部字段

  • Expires
  • Last-Modified

• 浏览器缓存的分类

  • <font color=red>强缓存</font> 和 <font color=red>协商缓存</font>

强缓存

• <font color=red>Expires</font>， <font color=red>Cache-Control</font>
• 返回的状态码 200
• <font color=red>network => size => 会显示 from-cache (from-disk-cache)，(from-memory-cache) </font>
• 强缓存的实现：通过( <font color=red>Expires</font> ) 或者 ( <font color=red>Cache-Control</font> ) 这两个 ( <font color=red>http response header</font> ) 来实现的，他们用都是用来表示资源在客服端存在的 <font color=red>有效期</font>

Expires

• http1.0提出，响应头中的一个字段，绝对时间，用GMT格式的字符串表示
• <font color=red>注意：expires是和浏览器本地的时间做对比，是一个绝对时间点，是一个GMT时间</font>
• Expires是优化中最理想的情况，因为它根本不会产生请求，所以后端也就无需考虑查询快慢

• Expires的原理

  Expires的原理

• 浏览器第一次向服务器请求资源，浏览器在请求资源的同时，在responder响应头中加上Expires字段

• 浏览器在接收到这个资源后，将这个资源和所有response header一起缓存起来

  • 所以，缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header

• 浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出Expires跟当前的请求时间做比较

  • 如果当前请求时间，在Expires指定的时间之前，就能命中强缓存，否则不能
  • 注意：Expires是和浏览器本地时间作对比

• 如果未命中缓存，则浏览器直接从服务器获取资源，并更新response header中的Expires

• expires是较老的强缓存管理header，<font color=red>是服务器返回的一个绝对时间</font>，在服务器时间与客服端时间相差较大时，Expires缓存管理容易出问题（比如：随便修改客户端时间，就能影响命中结果），所以在http1.1中，提出了新的header => Cache-Control，一个相对时间，以秒为单位，用数值表示

Cache-Control

• http1.1提出，响应头中的一个字段，相对时间，以秒为单位，用数值表示
• <font color=red>注意：Cache-Control也是和浏览器本地时间做对比，以秒为单位的时间段</font>

• Cache-Control可以指定：<font color=red>public</font> 和 <font color=red>private</font>

  • <font color=red>private</font>：表示该资源仅仅属于发出请求的最终用户，这将禁止中间服务器（如代理服务器）缓存此类资源，对于包含用户个人信息的文件，可以设置private
  • <font color=red>public</font>：允许所有服务器缓存该资源
  • no-cache：使用协商缓存
  • no-store：不使用缓存
  • max-age: 123123 // 一个时间段，单位是s
• <font color=red>Cache-control: no-cache,private,max-age=123123</font>
• Cache-Control的原理

Cache-Control的原理

1. 浏览器第一次向服务器请求资源，服务器在返回资源的同时，在responder的header中加上Cache-Control字段
2. 浏览器在接收到这个资源后，会将这个资源和所有的response header一起缓存起来
   - 所以，缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header
3. 浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出Cache-Control和当前请求的时间做比较
   - 如果当前请求时间，在Cache-Control表示的时间段内，就能命中强缓存，否则不能
4. 如果缓存未命中，则浏览器直接从服务器获取资源，并更新response header中的 Cache-Control

强缓存Expires和Cache-Control总结

• Expires和Cache-Control可以开启一个，也可以同时开启
• 当Expires和Cache-Control同时开启时，Cache-Control优先级高于Expires
• Cache-Control可以指定private和public，表示是否允许中间服务器缓存该资源
• expires是一个用GMT时间表示的时间点，Cach-Control是用秒表示的时间段，都是和浏览器本地时间做对比

协商缓存

• <font color=red>Last-Modified（If-Modified-Since）</font>，<font color=red>ETag（If-None-Match）</font>
• 返回状态码 304
• 协商缓存的原理：<font color=red>当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中</font>，如果协商缓存命中，请求响应返回的http状态为304，并且会显示一个Not Modified的字符串表示资源未被修改
• modified: 是修改的意思

Last-Modified 和 If-Modified-Since

• Last-Modified和If-Modified-Since都是根据 <font color=red>服务器时间</font> 返回的header
• 响应头：Last-Modified
• 请求头：If-Modified-Since

• 原理

  Last-Modified If-None-Match

• 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的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的响应后，就会从缓存中加载资源

• 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified Header在重新加载的时候会被更新

  • 下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

ETag 和 If-None-Match

• <font color=red>只要资源有变化ETag这个字符串就不一样，和修改时间没有关系，所以很好的补充了Last-Modified的问题</font>
• 响应头：ETag
• 请求头：If-None-Match

• 原理

  ETag 和 If-None-Match

• 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的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的响应后，就会从缓存中加载资源。

Last-Modified（If-Modified-Since） 和 ETag（If-None-Match） 的区别

• ETag的优势

  • ETag和Last-Modified非常相似，都是用来判断一个参数，从而决定是否启用缓存。
  • 但是ETag相对于Last-Modified也有其优势，可以更加准确的判断文件内容是否被修改，从而在实际操作中实用程度也更高。

强缓存和协商缓存的区别

• 协商缓存跟强缓存不一样，强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。
• 大部分web服务器都默认开启协商缓存，而且是同时启用Last-Modified，If-Modified-Since和ETag、If-None-Match
• Last-Modified，If-Modified-Since和ETag、If-None-Match一般都是同时启用，这是为了处理Last-Modified不可靠的情况
• // 分布式系统里多台机器间文件的Last-Modified必须保持一致，以免负载均衡到不同机器导致比对失败
• // 分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样）

浏览器缓存判断的流程

1. 第一次正常请求后，缓存了资源和所有header的前提下

2. 在资源缓存后，在缓存过期失效之前，如果再次请求该资源，<font color=red>默认先检查强缓存</font>

   • 强缓存命中，则直接读取
   • 未命中强缓存，则发送请求到服务器，<font color=red>再检查是否命中协商缓存</font>

3. 未命中强缓存，再发请求到服务器检查是否命中协商缓存

   • 协商缓存命中，则告诉浏览器还是可以从缓存读取
   • 未命中协商缓存，才从服务器返回最新的资源

https://juejin.im/post/684490...