首页 > 代码库 > http缓存与离线缓存
http缓存与离线缓存
一、http协议实现缓存
1. 缓存头部
通用缓存、条件缓存、缓存控制三大类
头部名称 | 说明 | 请求/响应 |
通用缓存头部 | 控制客户端是否向服务器发送请求或者是服务端响应请求 | |
cache-control | 用于随报文传递的缓存提示 | |
pragma | http1.0的,等于cache-control:no-cache,pragma优先级高于expires | |
条件头部 | ||
Last-Modified | 服务器响应时将文本最后修改时间放在此头部一起传送,如:Last-Modified:GMT | 响应 |
If-Modified-Since | 客户端发送收到的last-Modified的时间,让服务器验证,资源没有修改则是304 | 请求 |
If-Unmodified-Since | 若last-Modified没有匹配上,返回412(预验证失败) | |
ETag | 服务器响应时将文本的md5值跟随此头发送到客户端 | 响应 |
If-None-Match | 告诉服务器如果没有匹配上ETag相关资源就重发,否则304 | |
If-Match | 如果服务器没有匹配上ETag相关资源,则响应412 |
其他缓存头部 Vary | 向服务器请求时以Vary指定的字段来区分内容是否缓存了 data/age | 服务器响应时输出资源的最后响应时间(从本地缓存读取的资源不会有变化,也就是cache-control控制),而304的吃响应是有变化的
2. Vary
Vary: User-Agent, Accept-Encoding
告知服务器以User-Agent、Accept-Encoding两个头部的值区分缓存版本
3. cache-control的值说明
cache-control与expires是一致的,但expires是http1.0的东西,现代浏览器用得很少。
请求头部
- max-age
- max-age=0:表示跳过强制缓存,进行协商缓存
- max-age= 10(>0):客户端在指定时间内不会向服务器请求获取新的数据。
- no-cache: 告知(代理)服务器不直接使用缓存,要求向服务器发起请求,始终请求会被执行
- no-store: 所有内部不会被缓存或者放在浏览器临时文件夹下面
- max-stale: 告知(代理)服务器 客户端愿意接收一个超过缓存时间的资源,如果设置了 值(单位:秒),max-stale:3,超过3秒的值,没有则是任意时间
- min-fresh=seconds:客户端想接受一个小于seconds秒内被更新过的资源,至少在未来seconds秒内文档保持新鲜。chrome还是以max-age为准,firefox当值小于max-age时,以min-fresh为准,当值大于max-age时,直接无效
- no-transform:传送没有被转换过的实体数据(如:压缩),不知如何验证
- only-if-cached:客户端获取缓存(若有),不用向服务器请求, 无缓存则原始请求
- cache-extension:自定义扩展值,如果服务器不支持则忽略
- 响应头部
- max-age
指定响应多少秒之后过期(相对时间) - no-cache:不能直接使用缓存,要求向服务器发起请求(检测新鲜程度),始终请求会被执行 no-cache覆盖max-age的设置
- no-store: 所有内部不会被缓存或者放在浏览器临时文件夹下面,始终请求会被执行 no-store覆盖max-age的设置
- public:允许任何地方缓存,代理、cdn都可以
- private[=fieldName]:客户端可以缓存private响应问,但通常只针对用户,所以cdn、代理不缓存(未能测试出应用场景)
- no-transform:传送没有被转换过的实体数据(如:压缩),不知如何验证
- only-if-cached:客户端获取缓存(若有),不用向服务器请求, 无缓存则原始请求
- must-revalidate:当前资源一定是向原服务器发出验证请求的,若请求失败返回504(而非代理服务器的缓存),也就是响应必须来源于原始服务器
- proxy-revalidate:与must-revalidate类似,但仅能用于共享缓存(代理服务器)
- s-maxage:与max-age一致,但只能用于共享缓存(如:代理)
- cache-extension:自定义扩展值,如果服务器不支持则忽略
- max-age
- 总结
- chrome浏览器对max-age>0、no-store、max-stale请求头部支持不好,完全按钮响应的max-age来控制缓存了,firefox是按照http规范实现的。
- If-Unmodified-Since:不会响应412的情况
- last-Modified值匹配成功
- 服务器需要响应2XX或412之外的状态码
- 请求发送过来的时间格式不对
二、浏览器离线缓存
实现离线缓存的步骤:
- 创建一个缓存文件,如:main.appcache,建议文件以.appcache结尾
- 在web服务器上添加mine-type标识头,如:text/cache-manifest
- html文件引入此内容,如下代码:
<html manifest="test.appcache" ><head> <meta charset="UTF-8"></head><body> </body></html>
- main.appcache值说明
CACHE MANIFEST # 首次下载后需要缓存的文件# 禁止缓存的文件network:# 回退文件(页面无法访问时回退的页面)fallback:
- 事件与状态
5.1 状态
状态值 | 说明 |
0 | 未缓存 |
1 | 空闲(缓存为最新状态) |
2 | 检查中 |
3 | 下载中 |
4 | 更新就绪 |
5 | 缓存过期 |
5.2 事件
事件名 | 说明 |
checking | 正在检查 |
downloading | 正在下载 |
updatereadey | 更新完成 |
obsolete | 缓存过期 |
cached | 空闲,缓存为最新状态 |
error | 缓存报错时触发的事件 |
noupdate | 检查更新结束,没有需要更新的文件 |
window.applicationCache.addEventListener("cached",function(){ console.log("cached");});window.applicationCache.addEventListener("noupdate",function(){ console.log("noupdate");})
- 注意事项
6.1 CACHE MANIFEST必须在首行,且要大写
6.2 缓存文件,浏览器直接清理缓存是无效的
6.3 修改main.appcache文件任何内容,都会导致离线缓存重新加载,包含注释信
6.4 引入main.appcache文件的html文件,会直接被离线缓存
6.5 缓存对象:window.applictionCache
http缓存与离线缓存
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。