前端缓存机制——强缓存、弱缓存、启发式缓存

强缓存和弱缓存的主要区别是主要区别在于缓存头携带的信息不同。

强缓存:

浏览器发起请求,查询浏览器的本地缓存,如果找到资源,则直接在浏览器中使用该资源。若是未找到,或者资源已过期,则浏览器缓存返回未找到资源的信息,浏览器重新发起服务器请求,由服务器提供所需要的资源,服务器返回请求的资源后,浏览器将该资源存入浏览器的缓存中,以提供下一次使用。
找到所需资源

未找到所需资源

弱缓存(协商缓存):

协商缓存是在强缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识来决定是否使用缓存。
弱缓存生效 弱缓存失效

启发式缓存:

在强缓存中了解到缓存有效期由Expires和Cache-Control中的max-age来决定的,那么如果响应头中不存在这两个字段,缓存的有效期怎么计算?浏览器还会走强缓存吗?这就是启发式缓存解决的问题。

当报头中没有用来确定强缓存时间的字段时,浏览器会触发启发式缓存,缓存有效期计算公式:

复制代码
                            (date - last-modified ) * 10%

取响应报头中 date 与 last-modified 值之差的百分之十作为缓存时间。

首部字段解析

强缓存:

从上文中可以看出,合理设置强缓存可以减少不必要的服务端请求,提升网页打开速度。设置强缓存的奥秘就在于请求头和响应头中的首部字段,一起来看一下和强缓存相关的首部字段吧。

Expires 首部字段是 HTTP/1.0 中定义缓存的字段,其给出了缓存过期的绝对时间,即在此时间之后,响应资源过期。

Cache-Control 首部字段是 HTTP/1.1 中定义缓存的字段,其用于控制缓存的行为,可以组合使用多种指令,多个指令之间可以通过 "," 分隔,常用的指令有:max-age、s-maxage、public/private、no-cache/no store 等。

max-age: 给出了缓存的相对时间,单位为秒,即获得响应之后多少秒后过期,和Expires同时出现时,max-age优先级更高。

s-maxage:对公共缓存服务器生效,表示该资源在公共服务器中缓存的相对时间。如果存在公共缓存服务器,浏览器缓存失效后,会先请求公共缓存服务器,公共缓存服务器失效后会重新请求资源服务器更新公共缓存服务器中的资源,然后返回给浏览器。

public:表示可以被任何节点缓存,包括客户端和公共缓存服务器。

private:表示该资源只能被客户端(浏览器)缓存。

no-cache :表示客户端每次使用缓存资源前必须向服务器确认其有效性。

no-store :表示不缓存资源。

弱缓存:

Last-Modified:代表资源最后修改时间,存在服务端返回的响应头。

If-Modified-Since:存在客户端请求头,值为上次存储的Last-Modified,判断资源是否过期。

Etag: 代表资源的唯一标识,存在服务端返回的响应头,Etag优先级高于Last-Modified。

if-None-Match: 存在客户端请求头,值为上次存储的Etag,判断资源是否过期。

相关推荐
ZC跨境爬虫42 分钟前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
李子琪。2 小时前
网络空间安全深度实战:CSRF 漏洞原理剖析与基于 Token 的纵深防御体系构建(全栈实验报告)
前端·安全·csrf
冰暮流星2 小时前
javascript之history对象介绍
前端·笔记
IT_陈寒2 小时前
Vite热更新失灵?你可能漏了这个配置
前端·人工智能·后端
丷丩2 小时前
MapLibre GL JS第19课:实时更新要素
前端·javascript·gis·map·mapbox·maplibre gl js
Mr.Daozhi2 小时前
RAG 进阶实战:跑通 Demo 后我连续翻了 6 次车,逐一修复才真正可用(含 Gradio Web 版)
前端·数据库·langchain·大模型·gradio·rag·科研工具
哆来A梦没有口袋2 小时前
干货精讲 | 初级CSS面试高频考题
前端·css·面试
掘金013 小时前
EmbedPDF Vue 版 完整正文文档 全网首发
前端
OpenTiny社区3 小时前
操作ArkTS页面跳转及路由相关心得
前端·typescript·web·opentiny
xiaohua0708day3 小时前
Lodash库
前端·javascript·vue.js