http缓存 - 强缓存-协商缓存

缓存：页面缓存 dns缓存

强缓存: 

Cache-Control：max-age=121212

表示资源再被请求的max-age 秒内有效                                                                                                                                                                                  

过期机制中，最重要的指令是 "max-age=<seconds>"，表示资源能够被缓存（保持新鲜）的最大时间。相对Expires而言，max-age是距离请求发起的时间的秒数。针对应用中那些不会改变的文件，通常可以手动设置一定的时长以保证缓存有效，例如图片、css、js等静态资源。

expires: <http-date> 如果客户端时间小于expires 说明缓存没有过期 ；缺点： 如果客户端时间被修改了 ，那么可能会导致 expires 这个时间和客户端比较出现误差，从而导致 资源过期 

cache-Control: no-cache 不是不缓存资源，而是会立马过期，然后去继续请求浏览器请求头携带If-Modified-Since/If-None-Match(如果有的话)，如果服务器返回304 ，使用本地缓存；如果返回200说明缓存过期，返回最新的资源； 即每次都会去验证资源是否过期

协商缓存:

Last-Modified/If-Modified-Since它俩是成对的，是为了对比文件修改时间 精确到一秒, 如果在不感知的时间内变化，这个值不会变；缺点： 精确度不够到秒；假如对文件资源进行了编辑但是最终内容没有变化，服务器时间也会更新，从来导致重新请求资源。

另外一对 ETag/If-None-Match，用来对比文件内容,基础文件内容进行编码, 能精准感知文件的变化

 

 

学习参考：

彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

HTTP 缓存 - HTTP | MDN

(建议收藏)为什么第二次打开页面快？五步吃透前端缓存，让页面飞起 - 掘金如何中使首屏加载更快？怎么让刷新或关闭浏览器之后数据依然不被清空？缓存对于前端来说都是非常重要的领域https://juejin.cn/post/6993358764481085453