浏览器缓存

浏览器缓存

概念

简单来说，浏览器缓存就是浏览器把HTTP获取到的资源存储在本地的行为。

优先级

1. 先在内存中查找
2. 如果内存中不存在就在去硬盘中查找
3. 如果硬盘中也没有进行网络请求
4. 通过请求到的资源会进行缓存，存放到内存和磁盘中。

分类

1. 强缓存
2. 协商缓存

过程

1. 当客户端进行资源请求时，首先客户端会根据http请求头，判断该请求是否命中强缓存，如果命中则直接从本地获取缓存资源，不会发送请求到服务端。
2. 当没有命中强缓存时，请求会走到服务端，服务端会根据http请求头来验证是否命中了协商缓存，如果命中了协商缓存，回返304，告诉客户端从缓存中获取资源。
3. 当协商缓存未命中时，会直接将资源返给客户端。

f5刷新

1. 如果是按f5刷新，会直接跳过强缓存，但是会检查协商缓存
2. ctr + f5 刷新，会直接跳过强缓存 + 协商换粗，直接从服务端获取加载资源。

强缓存

• Expires（http1.0规范，值为一个绝对时间的GMT格式的时间字符串，表示资源的过期时间）
• Cache-Control（http1.0规范，判断资源的生命周期，单位秒），值有如下几个：
  • max-age：资源的最大生命周期
  • no-cache：需要进行协商缓存，发送请求到服务端确认是否是否使用缓存
  • no-store：禁止使用缓存，每次都需要重新请求。
  • public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器
  • private：只能被终端用户的浏览器缓存，不允许CDN等中间代理服务器对其缓存
• Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高

协商缓存

• Last-Modified / If-Modified-Since

Last-Modified 值为资源最后更新时间 GMT 格式的时间，随服务端 response 返回， 当浏览器再次请求该资源时，request 请求头中会包含 If-Modified-Since，该值为缓存之前返回的 Last-Modified，服务器收到 If-Modified-Since 后，根据资源的最后修改时间判断是否命中协商缓存

• ETag / If-None-Match

ETag 表示资源内容的唯一标识 一串数字码，随服务器端 response 返回，服务器通过比较请求头部的 If-None-Match 与当前资源的 ETag 是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存

总结

• 强缓存优先级高于协商缓存
• 只要使用缓存，服务端不会返回资源
• 强缓存不会发送请求
• 协商缓存会发送请求到服务端。