专栏首页cnblogshttp缓存与离线缓存

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:自定义扩展值,如果服务器不支持则忽略
  • 总结
    • chrome浏览器对max-age>0、no-store、max-stale请求头部支持不好,完全按钮响应的max-age来控制缓存了,firefox是按照http规范实现的。
    • If-Unmodified-Since:不会响应412的情况
      • last-Modified值匹配成功
      • 服务器需要响应2XX或412之外的状态码
      • 请求发送过来的时间格式不对

二、浏览器离线缓存

实现离线缓存的步骤:

  1. 创建一个缓存文件,如:main.appcache,建议文件以.appcache结尾
  2. 在web服务器上添加mine-type标识头,如:text/cache-manifest
  3. html文件引入此内容,如下代码:
<html manifest="test.appcache" >
<head>
    <meta charset="UTF-8">
</head>
<body>
    
</body>
</html>
  1. main.appcache值说明
CACHE MANIFEST 
# 首次下载后需要缓存的文件

# 禁止缓存的文件
network:

# 回退文件(页面无法访问时回退的页面)
fallback:
  1. 事件与状态

       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");
})
  1. 注意事项 6.1 CACHE MANIFEST必须在首行,且要大写 6.2 缓存文件,浏览器直接清理缓存是无效的 6.3 修改main.appcache文件任何内容,都会导致离线缓存重新加载,包含注释信 6.4 引入main.appcache文件的html文件,会直接被离线缓存 6.5 缓存对象:window.applictionCache

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue组件,可以通过npm引用的组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。 功能说明 多层弹出时,只有一个背景层。 弹出层嵌入内...

    sam dragon
  • Http协议状态码总结

    一、http方法 方法名 说明 get 发送一个获取请求,服务器的响应会包含head与body部分 post 发送一个输入数据的请求,服务器的响应...

    sam dragon
  • cordova环境搭建

    说明:gradle下载后,解压到硬盘某个目录即可;安装步骤:java->node->adb-studio

    sam dragon
  • [日常] HTTP的缓存

    陶士涵
  • 面对海量请求,缓存设计还应该考虑哪些问题?

    从第一个缓存框架 Memcached 诞生以来,缓存就广泛地存在于互联网应用中。如果你的应用流量很小,那么使用缓存可能并不需要做多余的考虑。但如果你的应用流量达...

    lyb-geek
  • 浅析数据库与缓存的双写一致性问题

    要想同时满足上面三条,可以采用读请求和写请求串行化,串到一个内存队列里去,这样就可以保证一定不会出现不一致的情况。但是,串行化之后,就会导致系统的吞吐量会大幅度...

    全菜工程师小辉
  • 详解HTTP缓存

    HTTP缓存是一项重要且常见的web性能优化手段。当通过浏览器发送HTTP请求时,如果浏览器本地有所要请求的文档副本,那么浏览器可以直接从本地存储中读取该文档,...

    黄泽杰
  • 使用Redis做MyBatis的二级缓存

    使用Redis做MyBatis的二级缓存  通常为了减轻数据库的压力,我们会引入缓存。在Dao查询数据库之前,先去缓存中找是否有要找的数据,如果有则用缓存中的数...

    java达人
  • 分布式之数据库和缓存双写一致性方案解析!

    首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作:

    Java后端技术
  • 分布式之数据库和缓存双写一致性方案解析

    首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作。

    Java团长

扫码关注云+社区

领取腾讯云代金券