·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]API详解11:Cache应用程序缓存,离线也可以玩

时间:2017-03-06 14:27web前端教程
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本

Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。

Web缓存的作用

使用Web缓存的作用其实是非常显而易见的:

1.减少网络带宽消耗

无论对于网站运营者或者用户,带宽都代表着金钱,过多的带宽消耗,只会便宜了网络运营商。当Web缓存副本被使用时,只会产生极小的网络流量,可以有效的降低运营成本。

2.降低服务器压力

给网络资源设定有效期之后,用户可以重复使用本地的缓存,减少对源服务器的请求,间接降低服务器的压力。同时,搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率,也能有效降低服务器的压力。

3.减少网络延迟,加快页面打开速度

带宽对于个人网站运营者来说是十分重要,而对于大型的互联网公司来说,可能有时因为钱多而真的不在乎。那Web缓存还有作用吗?答案是肯定的,对于最终用户,缓存的使用能够明显加快页面打开速度,达到更好的体验。特别是移动端没wifi的情况下。

cache用法

1.首先要在请在文档的 <html> 标签中包含 manifest 属性:<html manifest="/root/demo.appcache">

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存。

2.manifest 文件的建议的文件扩展名是:".appcache"。请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置(不懂就让后端开发人员设置一下呗)。

3.编写manifest文件

CACHE MANIFEST

#version2.1

CACHE:

/static/wap/js/zepto.min.js

/static/wap/css/animations.css

/static/wap/images/loading.gif

 

NETWORK:

/static/wap/css/base.wap.css

/static/wap/css/details.wap.css

FAILBACK :

/html5/ /404.html

必须声明CACHE MANIFEST在第一行,#是注释,最大的作用是缓存文件更新了,客户端无法更新主动更新缓存的时候,修改注释信息也可以出发客户端浏览器重新加载所有缓存的文件。

CACHE 指定缓存的文件,路径相当于manifest文件的路径。

NETWORK 指定不缓存的文件,每次都从服务器获取,如果不指定,在使用manifest的文档,不指定则默认为cache缓存

FAILBACK 指定第一个 URI 是资源,第二个是替补。

这样就实现了cache应用缓存了!

如何更新缓存

如下三种方式,可以更新缓存:

1.更新manifest文件

2.通过javascript操作

3.清除浏览器缓存(要用户自己这样操作是不可能的啦)

给manifest添加或删除文件,都可更新缓存,如果我们更改了js,而没有新增或删除,前面例子中注释中的版本号,可以很好的用来更新manifest文件。html5中引入了js操作离线缓存的方法,下面的js可以手动更新本地缓存。window.applicationCache.update();

使用总结:

1.有ajax请求的地址也要单独写上去,请求不确定的情况下最好写上*号。

2.缓存文件更新控制不灵活,每次修改文件的时候要顺带修改cache文件,无疑是增加了维护成本。就目前HTML5提供的manifest机制来讲,一个页面只能引用一个manifest页面,而且一旦发现这个manifest改变了,就会把里面所有定义的缓存文件全部重新拉取一遍,不管实际上有没有更新,控制比较不灵活。针对这个问题,也有的同学提出了一些建议,比如把需要缓存的文件分模块切分到不同manifest中,并分开用HTML引用,再使用强大的iframe嵌入到入口页面,这样就当某一个模式需要有更新,不会导致其他模块的文件也重新拉取一遍。

3.站点离线存储的容量限制是5M,超过5M的会缓存失败

4. 系统会自动缓存引用清单文件的 HTML 文件

5.引用manifest的html必须与manifest文件同源,在同一个域下

6.站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问

7. 当manifest文件发生改变时,资源请求本身也会触发更新

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器