面试-浏览器的协商缓存和强缓存

• 强缓存 🚀

通过设置请求头 cache-control 和 expires 来对文件进行强缓存，一般来说会同时设置两个，因为各浏览器对于请求头的支持不一样，部分浏览器只识别 chache-control 。

示例 🚍

Cache-Control:max-age=600  				             //600秒内会走强缓存
expires:Sun Jun 13 2021 01:40:44 GMT+0800 (中国标准时间)              //在这个时间之前走强缓存

• 协商缓存 🚀

通过设置请求头 If-Modified-Since 和响应头 Last-Modified 或者 设置请求头 If-None-Match 和响应头 Etag 来进行协商缓存。

示例 🚍

//组合1:
If-Modified-Since:Sun Jun 13 2021 01:40:44 GMT+0800 (中国标准时间) //请求头 
Last-Modified:Mon Jan 03 2022 00:00:00 GMT+0800 (中国标准时间)     //响应头
//组合2:
If-None-Match:"12138"		                                 //请求头
Etag:W/"12138" 							 //响应头

组合1：以比对两组时间的先后，如果 If-Modified-Since 的值小于 Last-Modified 则走缓存，反之就走服务的请求数据。

组合2：以比对两个验证内容的值是否相同，Etag 中的 W 表示使用弱验证器，不写则是使用强验证器。

• API 汇总 🚀

Cache-Control API 🚩

Cache-Control: max-age=31536000  //表示资源能够被缓存的最大时间。
Cache-Control: no-store          //不走缓存每次都从服务端拿到内容
Cache-Control: no-cache          //此方式会先从服务器去验证缓存是否过期，然后再绝对是否缓存
Cache-Control: private or public //缓存的私有性，默认是private，如果设置了 public 可能导致账号密码等信息被中间人缓存
Cache-Control: must-revalidate   //缓存校验