离线缓存 application cache

1,什么是离线缓存?php

  离线缓存能够将站点的一先文件缓存到本地,它是浏览器本身的一种机制,将须要的文件缓存下来,以便后期即便没有链接网络,被缓存的页面也能够展现。css

列子:好比咱们在手机或电脑上访问一个网页,下一次访问即便不连网也能够访问,由于当咱们第一次访问的时候,浏览器已经把此时页面给保存到本地了。html

2,离线缓存的优点:浏览器

  1,在没有网络的时候,能够访问到缓存对应的站点页面,包括html,css,img等文件。缓存

  2,在有网络的时候,浏览器也会优先使用已离线缓存的文件,返回一个200(from ache)头。这 跟http 的缓存使用策略不一样,网络

  3,资源的缓存能够带来更好的用户体验,当用户使用本身流量时,本地缓存不只能够提升用户访问速度,并且大大节约用户的使用流浪。app

3,实现离线缓存:
spa

  1,在须要缓存的html(网页)的跟节点添加属性manifest属性值是一个appcache
3d

appcache是一个控制缓存文件。demo.appcache要给manifest.html中属性manifest="demo.appcache"demo要同样htm

 

2,在同目录下创这个,appcache文件,并添加配置顶

3,appcache文件的内容格式

  须要注意:前两个是必写,后两个是可选,在这里面#是注释的意思

 

4,在服务端将appcache文件的mime类型配置成text/cache-manifest,下面以phpstudy为列:

打开mime.types文件后面添加

5,在网页打开manifest

如今就能够看到咱们缓存的文件有 css,img,html等

  你能够试着断网是否能访问到这个img,这个图片是网上图片须要网络加载,若是断网看看图片是否还能加载出来。

相关文章
相关标签/搜索