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的开发会受到影响。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 所谓“目标感”,就是在意识上知道自己真正想要的是什么,并在行动上心无旁骛、朝它靠拢。 2. 目标感很强的人,...
    懒熊熊阅读 1,342评论 0 0
  • 日记游学第27天:畅玩长隆海洋王国 2017年8月11日星期五珠海多云 几年前在珠海横琴岛长隆海洋王国横空出世,开...
    遇知音阅读 432评论 1 2
  • 2017.10.06,南京奥体中心,五月天“人生无限公司”演唱会,我们在现场。 记不太清什么时候和魏先生提起从来都...
    书悦阅读 760评论 2 5
  • - 01 - 明姐的女儿去年考上大学,九月份她就和丈夫离婚了,协议早就达成了共识,女儿归明姐。刚离婚丈夫迫不及待的...
    玉米婶阅读 482评论 1 14
  • 时间的钟响彻云霄 独自一人奔跑在黑夜 有一种声音他否定真理 也是那人生必将放弃 看一看曙光带来的梦 哦,夜晚我还不...
    叶少悲阅读 450评论 0 0