1、前端缓存
- 前端缓存可分为：
- http 缓存
- 浏览器缓存
- 今天主要讲的就是 http 缓存
2、HTTP 缓存
- 什么是 HTTP 缓存
- HTTP 缓存指的是，客户端向服务器请求数据时，会先抵达浏览器缓存，如果浏览器有这个需要请求的资源的副本，就可以直接从浏览器的缓存中提取这个资源，而不用花费更多时间再从对应的服务器获取数据。
- 常见的 HTTP 缓存只能缓存 get 请求响应的资源
- HTTP 缓存都是从第二次请求开始的。第一次请求资源时，服务器返回对应资源，并在 response header 头中回传资源的缓存数据；第二次请求，浏览器通过判断请求参数，命中强缓存就直接 200，否则就把请求参数到 request header 头中传给服务器，查看是否命中协商缓存，命中则返回 304，否则服务器会返回全新的资源
- HTTP 缓存分类
- 根据是否需要再次向服务器发起请求来判断分类，分为强缓存和协商缓存。
- 强缓存如果生效，就无须再与服务器发生交互
- 协商缓存不管是否生效，都需要与服务器发生交互
- 强缓存 与 协商缓存 的对比：
- 关于强缓存
- 强缓存在缓存数据还未失效的情况下（也就是 Cache-Control 的 max-age 或者 Expires 的事件没有过期、失效），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求。
- 强缓存生效时，返回的 http 状态码是 200，这种响应下的页面的加载速度是最快的。
- 但是，如果在这个设定的时间内，服务器端的资源进行修改，那么页面上是拿不到这部分更新的数据的，因为它不会再与浏览器产生交互。
- 强缓存相关 header 头属性
- Pragma （在 HTTP 1.1 中被遗弃）
- Cache-Control：设置过期时长（相对时间、时间段），指定一个时间长度，跟本地时间无关，在这个时间段内缓存是有效的。
- Expires：设置过期时间（绝对时间、时间点），超过了这个时间点就代表资源过期。但是用户的本地时间是可以自行调整的，所以会出现问题。
- 三者的优先级为（从高到低）：Pragma > Cache-Control > Expires
- 关于协商缓存
- 当第一次请求服务器时，返回的响应头中没有设置 Cache-Control 和 Expires，或者是 Cache-Control 和 Expires 已经过期的情况下，浏览器的第二次请求就会与服务器进行协商，与服务器端资源对比，判断是使用浏览器中的缓存数据还是重新发送资源给浏览器。
- 如果服务器端的资源没有更新修改，那么返回的 http 状态码为 304，告诉浏览器可以使用缓存的数据。
- 如果服务器的资源更新了，就会返回状态码 200，把更新后的资源与缓存信息一起发送给浏览器。
- 协商缓存的相关 header 头属性有：
- ETag
- If-Not-Match
- 协商缓存的执行流程：
- 浏览器第一次向服务器发送请求时，会在响应头返回协商缓存的头属性：ETga 和 Last-Modified（目前不再使用）
- 其中 ETag 是浏览器当前资源在服务器的唯一标识，其生成规则由服务器决定。
- 当浏览器在第二次向服务器发送请求时，会在请求头上带上与 ETag 对应的值。
- 服务器在接收到 ETag 值后会进行比较，如果返回 304，则说明资源没有更改，浏览器可以在缓存中读取数据。否则，服务器会直接返回更新后的资源
3、为什么要使用 HTTP 缓存
- HTTP 缓存的好处？
- 减少亢余的数据传输，节约资源
- 缓解服务器压力，提高网站性能
- 加快客户加载网页的速度
4、不想使用缓存的几种方式
- Ctrl + F5强制刷新，都会直接向服务器提取数据。
- 按F5刷新或浏览器的刷新按钮，默认加上Cache-Control：max-age=0，即会走协商缓存。
５、HTTP缓存的注意点
- 尽量减少 304 的请求，因为我们知道，协商缓存每次都会与后台服务器进行交互，所以性能上不是很好。从性能上来看尽量多使用强缓存。
6、总结：
- 对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行协商缓存策略。
- 对于协商缓存，将缓存信息中的 Etag 通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存，否则服务器重新发送数据资源给浏览器。
- 流程图
- 第一次请求
- 第二次请求
- 第一次请求
