一、http协议实现缓存
1. 缓存头部
通用缓存、条件缓存、缓存控制三大类
头部名称说明请求/响应
通用缓存头部控制客户端是否向服务器发送请求或者是服务端响应请求
cache-control用于随报文传递的缓存提示
pragmahttp1.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：自定义扩展值，如果服务器不支持则忽略
总结
last-Modified值匹配成功
服务器需要响应2XX或412之外的状态码
请求发送过来的时间格式不对
chrome浏览器对max-age>0、no-store、max-stale请求头部支持不好，完全按钮响应的max-age来控制缓存了，firefox是按照http规范实现的。
If-Unmodified-Since：不会响应412的情况
二、浏览器离线缓存
实现离线缓存的步骤：
创建一个缓存文件，如：main.appcache，建议文件以.appcache结尾
在web服务器上添加mine-type标识头，如：text/cache-manifest
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
1. 随笔为作者自己经验以及学习的总结；
2.如本文对您有帮助请移步右下角，推荐本文，先谢谢各位看官，因为您的支持是我最大动力；
3. 欢迎大家转载本文；
感谢 · 转发欢迎大家留言
欢迎初学和进阶中的小伙伴：499415298