Web缓存

1. 强缓存：

• Cache-Control:

max-age:xx秒 ：相对时间，强缓存必备
no-cache: 不直接使用缓存，开始服务器新鲜度判定
no-store：每次都下载最新资源
publoc/private: 是否只能被单个用户保存

• Expires:GMT时间

2.线上缓存:

Last-Modify/If-Modify-Since:GMT时间 依次比较，排序靠后

修改并不意味着改变，秒级判断

ETag/If-None-Match :校验值，先比较

使用系统默认的Hash算法，在分布式部署中会导致不同服务其的ETag值不一致

3. 消灭304 - 使用hash的方法对文件进行命名

4. 浏览器缓存

Cookie: 主要用于用户信息的存储
LocalStorage
SessionStorage:

5. 本地存储大容量:

• WebSql：关系型数据库，已废弃
• IndexDB：非关系型数据库

6.应用缓存与PWA

应用缓存全称为Offline Web Application，它的缓存内容被存在浏览器的Application Cache中。它也是一个被W3C标准废弃的功能，主要是通过manifest文件来标注要被缓存的静态文件清单。但是在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。而且，即使我们更新了version，用户的第一次访问还是会访问到老的页面，只有下一次再访问才能访问到新的页面。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。

PWA全称是渐进式网络应用，主要目标是实现web网站的APP式功能和展示。尽管PWA也有manifest文件，但是与应用缓存却完全不同。不同于manifest简单的将文件通过是否缓存进行分类，PWA用manifest构建了自己的APP骨架。另外，PWA用Service Worker来控制缓存的使用。这一块的内容较多，在这里就不详细展开了。

比较:

• 应用缓存 Manifest 离线缓存 已废弃
• PWA Manifest，SW.js APP式应用 正常使用，但是浏览器兼容性不好

6.往返缓存

• BFCache 浏览器在前进后退按钮上为了提升历史页面的 渲染速度的一种策略。

会缓存所有的DOM结构，一些页面开始时进行的上报或者请求可能会被影响，微信H5的开发会受到影响。