浏览器缓存——强缓存、协商缓存

目录

浏览器缓存:强缓存、协商缓存  

#强缓存

#协商缓存

#补充

#拓展


浏览器缓存:强缓存、协商缓存  

区别:强缓存不向服务器发送请求,协商缓存会发送请求至服务器

相同点:若命中,都直接从浏览器缓存加载资源,不从服务器加载

由响应头来控制缓存:

强缓存:Expires、Cache-Control

协商缓存(响应头+请求头):【Last-Modified + If-Modified-Since】、【ETag + If-None-Match】

#强缓存

1. Expires                                                                                                                                          

内容:GMT格式字符串,存储的是一个绝对时间

过程:

第一次请求资源 ---》返回的响应携带Expires响应头 ---》浏览器将响应内容缓存

再次请求资源 ---》浏览器缓存中查找,若有则取出Expires时间与当前时间比较

                       ---》在Expires之前则命中,读取资源

                       ---》否则未命中,从服务器再次加载资源时,Expires被更新

风险:若用户手动修改浏览器时间,则会造成错误

2. Cache-Control                                                                                                                              

内容:绝对时间,以秒为单位。HTTP1.1版本提出

过程:

第一次请求资源 ---》返回的响应携带Cache-Control响应头 ---》浏览器将响应内容缓存

再次请求资源 ---》浏览器缓存中查找,若有则取出Cache-Control计算有效期,与当前时间比较

                       ---》在有效期之前则命中,读取资源

                       ---》否则未命中,从服务器再次加载资源时,缓存Cache-Control

配置项:

        max-age:最大有效时间

        must-revalidate:若超时,必须发送请求验证

        no-cache:不使用强缓存(面试有考)

        no-store:不使用缓存(面试有考)

        public / private:代理是否可缓存

#协商缓存

1. Last-Modified + If-Modified-Since                                                                                              

内容Last-Modified 存储的是资源文件最后一次更新的时间

过程:

第一次请求资源 ---》返回的响应携带Last-Modified响应头 ---》浏览器将响应内容缓存

再次请求资源 ---》将上次请求回的Last-Modified中内容,放入If-Modified-Since请求头中

                       ---》向服务器发送请求

                       ---》服务端判断时间,判断时间可知资源是否变化

                       ---》未变化则返回304状态码,响应头中没有Last-Modified

                       ---》变化则返回200状态码+资源文件+最新的Last-Modified以供浏览器更新

问题点:

        * 资源修改但是内容没有实质性变化,例如文件周期性重写。仍然会将文件返回给浏览器

        * 无法辨别一秒内多次修改的情况,不精确

2. ETag + If-None-Match                                                                                                                  

内容:ETag 存储的是服务器根据文件内容生成的唯一标识,用字符串表示。HTTP1.1版本提出

过程:

第一次请求资源 ---》返回的响应携带ETag响应头 ---》浏览器将响应内容缓存

再次请求资源 ---》将上次请求回的ETag中内容,放入If-None-Match请求头中

                       ---》向服务器发送请求

                       ---》服务端再次根据文件内容生成ETag,与收到的If-None-Match比较可知文件是否有变化

                       ---》未变化则返回304状态码+新生成的ETag(浏览器更新),不返回资源

                       ---》变化则返回200状态码+资源文件+最新的ETag以供浏览器更新

#补充

Q:刷新操作对缓存的影响

A:正常操作(输入地址URL、跳转连接、前进后退等等):强缓存与协商缓存均有效

手动刷新(f5、点击菜单刷新、右键刷新):强缓存失效,协商缓存有效

强制刷新(ctrl + f5):强缓存、协商缓存均失效

#拓展

面试问题:前端存储有哪些?

(cookie、sessionStorage、localStorage、浏览器缓存、indexDB...)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值