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文件发生改变时，资源请求本身也会触发更新
HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了相关推荐
- HTML5 API详解（16）:web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
- HTML5 API详解（15）:History 不刷新也可以实现网页跳转
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- HTML5 API详解（5）:Page Visibility API帮您省流量，提高体验
页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
- HTML5 API详解（18）:IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
- HTML5 API详解（17）:Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
- HTML5 API详解（14）:Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
- HTML5 API详解（3）：为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
- HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
- HTML5 API详解（8）:worker多线程教你如何避免页面卡死
web worker是html5 提供的一个JavaScript多线程的解决方案,worker用于处理一些大量复杂耗时的计算,免得页面冻结.挂起.卡死. 比如:我们要运算一个复杂的数学计算:递归计算. ...
最新文章
- springboot 分层_限量！阿里Spring Boot成长笔记终开源！理论实战满满
- 允许root远程登录Solaris
- mysql脚本下载_Mysql备份脚本
- 机器学习从入门到精通系列之BP神经网络理论知识详解
- 笔记-项目质量管理-复习要点
- python怎样入门_python怎么入门啊?
- 全球权威MLPerf基准测试再发榜，浪潮AI服务器创18项AI性能纪录
- 傲游浏览器语言怎么切换 傲游浏览器语言切换方法简述
- Gnome即将满18岁，适用于Docker，Kali Linux 2.0的新工具以及更多新闻
- favicon.ico在ie下面不显示的解决方法
- OSPF基础知识及配置命令
- Aliplayer自定义组件
- MPU6050+一阶互补滤波
- IIS 405 Method Not Allowed
- cocosCreator 全局变量（Ts版）
- 写给女儿的话---小荷作文万米写书序言
- vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
- utf8汉字编码16进制对照
- Web前端工程师学习路径图，你掌握了多少？
- 【Tableau Desktop 企业日常问题23】Tableau 筛选之后如何保持原有排序顺序？