[html5]API详解11：Cache应用程序缓存，离线也可以玩
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文件发生改变时，资源请求本身也会触发更新
热门文章推荐
- 10款html5网页播放器推荐（总有一款适合你）
- [html5]html5+css3实现图片斜角切成直角梯形显示的源代码
- [HTML5]HTML5视频video时间事件代码
- [微信]iOS苹果和微信中音频和视频实现自动播放的方法
- [html5]html5视频全屏实现的源代码
- [Html5]mobile-agent移动Agent,就是具有移动性的智能Agent
- [html5]视频播放器js控制vedio视频和分段播放
- [html5]H5播放器：竖屏播放\横屏播放\跟随旋转例子
