1.为什么缓存？
相对于cpu的计算和页面加载速度（mm级）来说，
网络请求更耗时，
所以通过http缓存的方式时间来减少网络请求，
从而能达到访问前端页面的性能优化。
http缓存策略分为强制缓存和协商缓存
2.强制缓存 Catch-Control
Cache-Control 在Response Headers中,控制强制缓存的逻辑.
(例如 Cache-Control:max-age=31536000(秒)=1年).
Expires 在Response Headers中，设置缓存过期，已被Catch-Control代替
- Cache-control的值
- max-age 设置缓存的最大过期时间 **
- no-catch 有本地缓存，不用强制缓存，向服务端请求 **
- no-store 不让服务端做缓存，完全不缓存
- private 发起请求的浏览器才能使用返回数据的缓存
- public 这个HTTP请求它返回的内容所经过的任何路径中，包括中间的一些HTTP 代理服务器以及发出请求的客户端浏览器，都可以进行对返回内容的缓存操作
- http强制缓存过程
强制缓存过程
浏览器初次请求时，服务端返回资源和Catch-Control，
再次请求时，若Cache-control中响应头信息中设置了max-age=***[秒]，则访问本地缓存。
3.协商缓存（对比缓存)
服务端缓存策略-服务端判断资源是否用缓存.
服务端判断客户端资源标识是否跟服务端资源一样，一致则返回 304，负责返回 200和最新资源
在Response Headers中,资源标识分为两种：
Last-Modified 资源最后被修改的时间
Etag 资源的唯一标识，Etag值根据资源内容改变而改变
- Last-Modified为资源标识协商缓存的过程
Last-Modified
- 第一次请求，服务器端的返回状态200、资源，
- 同时有 Last-Modified 的属性标记此文件在服务器端最后被修改的时间。
- 第二次请求，根据HTTP协议的规定，浏览器会向服务器传送If-*Modified-Since报头，询问该时间之后文件是否有被修改过：
- 如果服务器端的资源没有变化，则自动返回 HTTP 304（Not Changed.）状态码，内容为空，这样就节省了传输数据量。
- 当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。
- 以Etag为资源标识协商缓存的过程
Etag
- 第一次请求，服务器返回状态码200、资源和一堆Header，
包括Etag(例如"2e681a-6-5d044840")属性标识唯一资源 - 第二次请求，客户端发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d044840
- 服务器判断发送过来的Etag和计算出来的Etag匹配
- If-None-Match为False资源没有变化，返回304，客户端继续使用本地缓存
优先使用Etage
- Last-Modified只能精确到秒级
- 如果资源被重复生成，而内容不变，则Etag更精确
4. http缓存流程图
http缓存流程
5. 刷新操作方式，对缓存的影响
| 操作方式 | 场景 | 强制缓存 | 协商缓存 |
|---|---|---|---|
| 正常操作 | 地址输入url,跳转链接，前进后退 | 有效 | 有效 |
| 手动刷新 | f5，点击刷新按钮，点击菜单刷新 | 失效 | 有效 |
| 强制刷新 | shift+commond+R | 失效 | 失效 |
网友评论