前端缓存分为http缓存跟浏览器缓存。本文主要讲http缓存，种类分为：强缓存&协商缓存，他两者都是从本地缓存中加载资源，区别在于强缓存直接读取缓存中的数据，而协商缓存需要向服务端发起请求，判断是否需要返回
概念介绍
- 强缓存：我们第一次打开某个网站，加载速度会比较慢，再次访问时能明显感觉到加载速度较第一次更快速，这就是强缓存在起作用。命中强缓存时，不会向服务器发送请求，直接从缓存中读取资源。
- 协商缓存： 协商缓存是在强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识来决定是否使用缓存
一、如何判断是强缓存或协商缓存
在network调试面板中，首先查看status，如果为304则走的协商缓存；如果状态码为200，再查看请求的Size栏，是否为memory cache、disk cache，如果是则走的强缓存
二、设置规则
-
强缓存：第一次请求资源时，服务端会返回“Cache-Control”或“Expires”，根据设置的资源有效时间，判断是否需要去远端请求资源。设置
Cache-Control：no-cache这样客户端就会跳过强缓存，向服务端发起新的请求，判断是否使用协商缓存。设置Cache-Control:no-store禁止客户端缓存。 -
协商缓存包含两种：ETag和Last-Modified。Last-Modified：资源最后的修改时间。ETag：首次访问时返回唯一的ETag值，这个值当资源发生变化时会改变。在请求时，会把这两个数据带给服务端，服务端根据这个值跟当前的值比较，看是否发生变化，决定是否返回304状态吗。如果返回304则从本地缓存中加载
-
启发式缓存： 如果“Cache-Control”或“Expires”这两个都没有，找找响应头里的Last-Modified，如果有，缓存的寿命🟰（相应头Date➖Last-Modified ）➗ 10
三、如何清除各种缓存
| 快捷键 | 普通缓存 | 强缓存 |
|---|---|---|
| Mac | ⌘+R | ⌘+⇧+R |
| Windows | F5 | Ctrl + F5 |
下图是一个流程图，可以用来分析请求
四、实战
以掘金首页为例，看两个文件juejin.cn和sdk-glue.js，看这两个请求分别采用了什么缓存
1. juejin.cnhtml
- 第一次请求：状态码200，请求头中设置了Cache-Control，表示不走强制缓存。响应头包含Etag字段，用来后续判断是否走协商缓存
- 普通刷新：状态码200，且没有走缓存。因为刷新时通过
If-None-Match这个字段携带第一次返回的Etag，服务端最新的Etag跟携带的不一致
-强制刷新：状态码200，重新加载资源
2.sdk-glue.js
- 第一次请求：状态码200，响应头中包含Etag字段
- 普通刷新：状态码为200，from disk cache，使用的强制缓存。因为
Cache-Control:max-age=31536000，意味着缓存内容在31536000之后失效。
- 强制刷新：状态码为200，且没有走缓存
