前端缓存

缓存这个磨人的小妖精，有时候能能提高网页的访问速度，有时候又让咱们前端背锅。

（老板指着页面说：“你这bug不是说改好了吗？大家这些小年轻，不讲码德啊，来骗我这老同志，这好吗？这很差，年轻人，耗子尾汁！”，前端瑟瑟发抖，暗想咋回事，我还有码德这回事？啊不，在我这不是改好了吗？这bug还认人不成？苦思冥想半天，终于当心翼翼地说：“领导，清一下缓存？”）

让咱们来认识一下浏览器缓存

1.强缓存

强缓存，顾名思义，它是强势的，就像你的老板懂了吧（狗头）， 若是要请求的资源没有过时，那就直接用本地缓存，都不用发请求和服务器商量。

强缓存分为：Cache-Control、Expires，而Cache-Control的优先级是高于Expires的，由于Expires是HTTP1.0的产物，如今通常是用Cache-Control，因此Expires就不介绍了。

 

状态码是200 (from disk cache)，直接使用用户本地的缓存。看到这两个箭头所指的东西，就是用了强缓存。

 

那强缓存有什么属性呢？我这里就说几个常见的，具体属性可见Cache-Control

（1）max-age

储存的最大周期，超过了就是不新鲜的了，浏览器就要喜新厌旧啦

Cache-Control: max-age = 3600；

max-age的单位是秒，若是max-age = 0，那其实就是用协商缓存，要去验证内容是否新鲜了。

 

（2）public

公共的，谁均可以缓存这个资源，不管你是客户端仍是代理器，随便存，即便这个文件是不应被缓存的。

 

 Cache-Control: public；

 

（3）no-cache

这个属性就不能够顾名思义了，这个属性的意思是强制你要发个请求跟服务器验证这个资源是否是新鲜的即协商缓存了

 Cache-Control: no-cache；

 

 （4）no-store

这个才是不使用缓存

 

2.协商缓存

协商缓存个人理解是：跟服务器协商下，看看能不能用用户本地的缓存，能够的话，状态码就是304 Not Modified（未改变）

前提是这个请求没有命中强缓存，浏览器才会去看看它能不能命中协商缓存，若是仍是没中，那就正常发请求呗。

（1）.Etag & If-None-Match

etag是一个哈希值，若是etag的值等于If-None-Match，那就命中了，可使用本地缓存了。此外etag优先级高于Last-Modified，精确度也比Last-Modified高。

请求头：

 

响应头

 

 

 

 

（2）.Last-Modified & If-Modified-Since

由于这一对的准确度比较低，而后优先级也低，因此如今用的也少了，配置了强缓存和Etag & If-None-Match后，基本就不用配置这个了。

Response Head
Last-Modified:Fri Dec 04 2020 18:18:43 GMT

Request Head
If-Modified-Since:Fri Dec 04 2020 18:18:43 GMT

 若是Last-Modified返回的时间过了这个时间，那就是说明资源已经在服务器更新了，不能再用本地缓存了，那就得发请求重新获取了。

 

使用缓存流程图：