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

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

强缓存:

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

未找到所需资源

弱缓存(协商缓存):

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

启发式缓存:

在强缓存中了解到缓存有效期由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,判断资源是否过期。

相关推荐
Mintopia5 分钟前
🤖 AI 决策 + 意图OS:未来软件形态的灵魂共舞
前端·人工智能·react native
攀登的牵牛花6 分钟前
前端向架构突围系列 - 框架设计(四):依赖倒置原则(DIP)
前端·架构
Van_Moonlight6 分钟前
RN for OpenHarmony 实战 TodoList 项目:已完成未完成数量显示
javascript·开源·harmonyos
程序员爱钓鱼14 分钟前
Node.js 编程实战:测试与调试 —— 日志与监控方案
前端·后端·node.js
Mapmost22 分钟前
数字孪生项目效率翻倍!AI技术实测与场景验证实录
前端
小酒星小杜26 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统-Input篇
前端·程序员·架构
Cache技术分享34 分钟前
290. Java Stream API - 从文本文件的行创建 Stream
前端·后端
陈_杨37 分钟前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片开发完全指南
前端·harmonyos
小杨同学4943 分钟前
C 语言实战:枚举类型实现数字转星期(输入 1~7 对应星期几)
前端·后端
陈_杨44 分钟前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片刷新机制
前端·harmonyos