浏览器缓存机制

参考文章：https://mp.weixin.qq.com/s/d2zeGhUptGUGJpB5xHQbOA 总结

1. 什么是浏览器缓存

• 描述：当用户首次访问某个网站时，浏览器首先请求浏览器缓存，浏览器缓存没有该网站的缓存，于是浏览器直接请求网站，拿到网站返回数据后，存入浏览器缓存。
• 作用：缓存网站信息，减少网络开销，加快访问速度

2. 浏览器缓存的类型

2.1 强制缓存

浏览器访问任何网站前强制先访问浏览器缓存。

2.2 协商缓存

强制缓存失效时，浏览器携带上次请求返回的过期时间或者上次请求返回的数据Etag，服务端发现到了过期时间或者内容Etag变化，就不使用浏览器缓存，返回最新数据；如果没有到过期时间或者内容Etag没有变化，就继续使用浏览器缓存。

3. HTTP 请求头字段

Expires

Expires是HTTP/1.0使用，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。

Cache-Control

由于Expires校验原理是比较客户端和服务端的绝对时间，如果时区不同、或者一方时间不准确，用Expires判断过期不够准确。

Cache-Control可填写字段：

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）
• private：所有内容只有客户端可以缓存，Cache-Control的默认取值
• no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
• no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
• max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
  max-age表示相对时间，客户端在xxx秒后再次请求服务器，会发现缓存失效。

若同时存在cache-control和expires，只有cache-control生效

Last-Modified | If-Modified-Since

服务器可以通过配置这个响应头，来向浏览器发送一个数据上次被修改的时间标签，例如：Last-Modified:Wed, 15 Jul 2020 02:54:16 GMT

Etag

内存缓存&硬盘缓存

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

4. 总结

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程如下：