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缓存与离线缓存的更多相关文章
- HTML5离线缓存（Application Cache）
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5离线缓存
参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...
- H5 离线缓存的用法
H5离线缓存基础系列 1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...
- H5离线缓存基础系列
1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- Html5离线缓存详细讲解
离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...
- 使用html5的离线缓存技术
突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存
本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...
随机推荐
- IIS+Tomcat功能iis端口2
之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...
- day20.序列化模块
参考云游道士:https://www.cnblogs.com/yyds/p/6563608.html 1.什么是序列化 序列化就是将字典,数字等数据类型转换为字符串数据类型 所说的序列就是字符串 2. ...
- phpstudy配置本地https
百度经验(me'i经过测试) 首先申请免费的ssl证书,很多地方都可以申请.我是在腾讯云!如图 下载证书备份好.以免丢失.解压下载的证书,里面有4个文件夹相对应不同的安装环境,我们用的是Apache, ...
- 利用kibana插件对Elasticsearch查询
利用kibana插件对Elasticsearch查询 Elasticsearch是功能非常强大的搜索引擎,使用它的目的就是为了快速的查询到需要的数据. 查询分类: 基本查询:使用Elasticsear ...
- linux centos 用户权限相关总结
linux上用户管理 以及 相应权限 查看 增加 删除用户 修改密码 用户 用户组 用户默认目录 用户shell路径 等 用户管理 相关文件 1. 查看系统有哪些用户 cat /etc/passwd ...
- 跟大家谈一谈：涛舅舅家的微信域名检测api的心路历程
微信域名检测,这是近一年来兴起来的一种网络服务,可以通过api接口来对域名进行批量检测,以确认该域名有没有被微信拦截(见红),然后通过编程来实现域名切换保障链接可以正常打开. 涛舅舅工作室从事微信域名 ...
- MongoDB 学习使用
博客教程: https://jingyan.baidu.com/article/dca1fa6f0428a4f1a440522e.html
- vue-cli+mock.js+axios模拟前后台数据交互
最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...
- ionic3+angular4开发混合app 之自定义组件
这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...
- hibernate框架中注意的几个问题
使用hibernate框架中,session.createSQLQuery创建sql语句的时候遇到的问题 1. select e.id,d.id from emp e,dept d where e. ...