浏览器缓存机制(结合响应头)

·  阅读 572
浏览器缓存机制(结合响应头)

浏览器缓存机制(结合响应头)

以真实的用户请求举例。 假设明明同学访问:aaa网站 (此前从未访问过)

强烈建议先阅读 前篇 浏览器缓存的起点 -> Cache-Control

第一次访问aaa网站

肯定没有任何一个资源是有缓存的吗?

答案: 错

某些CDN或静态资源可能有缓存

解释: 假设(aaa网站 和 xxxxxx网站) 同时使用了CDN: <script src="https://cdn.jsdelivr.net/npm/vue"></script> 用户在访问aaa网站之前访问过了 xxxxxx网站,那就已经有CDN缓存了(一般CDN缓存是至少1年以上,1年内都有缓存)

请求一个资源的流程

顺序是:

  1. 先找memory(内存)内是否有缓存
  2. 在找disk (硬盘缓存)
  3. 都没有,在发起请求
  • 然后缓存到本地(具体是缓存到memory还是disk,浏览器会根据当前的内存空间情况和资源大小,按情况缓存,为了方便介绍,此后统称缓存)

如果响应头没有设置缓存过期时间,浏览器在缓存资源时,会自己计算出过期时间(强制缓存生效时间内)

如何计算的? 根据响应头Cache-Control 具体请看我上一篇文章 浏览器缓存的起点 -> Cache-Control

第二次以后访问aaa网站

强制缓存(不会发起请求)

以 main.xx.js 举例,浏览器在发起请求前会先去缓存内找。拿到了之后,检查过期时间,未过期则进入 强制缓存,已过期则进入 协商缓存

协商缓存(会发起请求,询问资源是否变更)

作用: 确认一下资源是否已变更(需对服务端发起请求,只不过是header请求,更轻量),如果没过期则继续用本地缓存

获取到新的响应头后,会对比Etag(指纹)或last-modified(最后修改时间)。如果没变更则继续用本地缓存,已变更则重新发请求

注:如果进入了强制缓存,是不会发起协商缓存的,直接就响应资源。(可能导致资源不能及时更新,所以要根据需求,定制准确的 前端缓存策略juejin.cn/post/694315…

last-modified 有个小缺点,也是etag的诞生原因

  • 当文件被频繁更改,且是秒以内的时间,有可能造成last-modified没生成到最新的

有个问题场景

如何做到既不重新部署web,也能响应到最新的静态资源,也能保留资源的浏览器缓存?

有个需求:我的web项目,有个语言包 zh.json,假设里面是我的菜单,及菜单介绍。我如何做到不重新发布web项目,也能让zh.json的更改生效,同时还能保留浏览器对zh.json的缓存

答:可以设置7天过期时间(更改更频繁的话,可以设更小) Cache-Control: max-age=604800 (7天之后,浏览器就会发起预检请求,去检测资源是否改变,已改变则重新获取zh.json)

附张流程图


码字不易,点赞鼓励


性能优化合集快速入口:

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改