整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、什么是应用程序缓存:
HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网
连接时进行访问
2、应用缓存的优势:
1): 离线浏览-用户可在应用离线时使用它们
2):速度-已缓存资源加载得更快
3):减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源
3、实现缓存:
如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性
manifest文件的建议的文件扩展名是:’.appcache'"
4、Manifest 文件:
1): CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存
2): NETWORK -在此标题下列出的文件需要与服务器的连接， 且不会被缓存
3): FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面(比如
404页面)
具体使用：1、在html页面的html标签里面添加.appcache 的文件
2、创建对应的.appcache文件
3、在缓存文件里面写上 CACHE MANIFEST 注意是大写哦
接着写上CACHE:../db.html
db.js
db.html页面里面：<html manifest="js/db.appcache">db.appcache文件创建在js文件夹里面，创建的时候，选择创建文件即可
页面加上缓存后，本地打开服务器html5页面速度会变快，或者服务器没有连接上，本地也可以显示页面数据
SDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面。如果您想投稿、寻求《近匠》报道，或给文章挑错，欢迎发送邮件至tangxy#csdn.net（请把#改成@）。
HTML5是新一代的HTML标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。HTML5引入的离线存储，这意味着Web应用可进行缓存，并可在没有因特网连接时进行访问。
HTML5应用程序缓存为应用带来三个优势：
根据标准，到目前为止，HTML5一共有6种缓存机制，有些是之前已有，有些是HTML5才新加入的。
下面我们首先分析各种缓存机制的原理、用法及特点；然后针对Android移动端Web性能加载优化的需求，看如何适当利用缓存机制来提高Web的加载性能。
浏览器缓存机制是指通过HTTP协议头里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段来控制文件缓存的机制。这应该是Web中最早的缓存机制了，是在HTTP协议中实现的，有点不同于Dom Storage、AppCache等缓存机制，但本质上是一样的。可以理解为，一个是协议层实现的，一个是应用层实现的。
Cache-Control用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600表示文件在本地应该缓存，且有效时长是600秒（从发出请求算起）。在接下来600秒内，如果有请求这个资源，浏览器不会发出HTTP请求，而是直接使用本地缓存的文件。
Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过If-Modified-Since字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。
Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。
Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。
Etag也是和Last-Modified一样，对文件进行标识的字段。不同的是，Etag的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过If-None-Match字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag和Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
下面是通过Google Chrome浏览器（用其他浏览器+抓包工具也可以）自带的开发者工具，对一个资源文件不同情况请求与回包的截图。
首次请求：200
缓存有效期内请求：200(from cache)
缓存过期后请求：304（Not Modified)
一般浏览器会将缓存记录及缓存文件存在本地Cache文件夹中。Android下App如果使用Webview，缓存的文件记录及文件内容会存在当前App的Data目录中。
分析：Cache-Control和Last-Modified一般用在Web的静态资源文件上，如JS、CSS 和一些图像文件。通过设置资源文件缓存属性，对提高资源文件加载速度，节省流量很有意义，特别是移动网络环境。但问题是：缓存有效时长该如何设置？如果设置太短，就起不到缓存的使用；如果设置的太长，在资源文件有更新时，浏览器如果有缓存，则不能及时取到最新的文件。
Last-Modified需要向服务器发起查询请求，才能知道资源文件有没有更新。虽然服务器可能返回304告诉没有更新，但也还有一个请求的过程。对于移动网络，这个请求可能是比较耗时的。有一种说法叫“消灭304”，指的就是优化掉304的请求。
抓包发现，带if-Modified-Since字段的请求，如果服务器回包304，回包带有Cache-Control:max-age或Expires字段，文件的缓存有效时间会更新，就是文件的缓存会重新有效。304回包后如果再请求，则又直接使用缓存文件了，不再向服务器查询文件是否更新了，除非新的缓存时间再次过期。
另外，Cache-Control与Last-Modified是浏览器内核的机制，一般都是标准的实现，不能更改或设置。以QQ浏览器的X5为例，Cache-Control与Last-Modified缓存不能禁用。缓存容量是12MB，不分Host，过期的缓存会最先被清除。如果都没过期，应该优先清最早的缓存或最快到期的或文件大小最大的；过期缓存也有可能还是有效的，清除缓存会导致资源文件的重新拉取。
还有，浏览器，如X5，在使用缓存文件时，是没有对缓存文件内容进行校验的，这样缓存文件内容被修改的可能。
分析发现，浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的：
在实际应用中，为了解决Cache-Control缓存时长不好设置的问题，以及为了“消灭304”，Web前端采用的方式是：
通过这种方式，实现了：缓存文件没有更新，则使用缓存；缓存文件有更新，则第一时间使用最新文件的目的。即上面说的第1、2条。第3、4条由于浏览器内部机制，目前还无法满足。
、HTML5离线缓存技术
支持离线缓存是HTML5中的一个重点，离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用。传统的本地存储数据的方式有 localstorage,sessionstorage和cookie。但是这些传统的方式有着致命的弊端。首先这些传统的存储方式的最大使用空间有 限，最多不超过5M;其次它们处理大规模的结构化数据的能力有限。鉴于传统方式的局限性，HTML5提出了三种新的离线缓存解决方案：Web SQL,indexedDB和File System。
其中Web SQL已经不包含在HMLT5规范中，成了一个独立的规范，Web SQL使用的SQL是SQLite。由于无法统一各个浏览器厂商实现的SQL语言,故Web SQL已经被废弃，由indexedDB取代，但是目前很多浏览器支持Web SQL，而且相对于indexedDB和 File System来说，Web SQL的效率最高，访问速度最快，稳定性也最好。
indexedDB也支持本地存储大量对象，并使用健壮的数据访问机制检索数据。但是目前支持Indexedb的浏览器很少，而且规范还在持续更新中，暂时还没有形成一个统一的标准。
在离线环境中，WebDataBase 虽然能够存储并有效地管理和维护客户端的数据集合，但是仍不能满足对包含大段数据文件的存储和多种不同格式 文件的保存，于是我们就需要离线的文件管理系统来维护我们工作了，基于HTML5的File System API 就充当这这个角色。File System非常适合大量的存储媒体文件。对于手机端而言，不同的浏览器的实现有所不同，有的浏览器是将文件写入到ROM中，如QQ手机浏览器，有的浏览 器是将文件写到SD卡中，如百度浏览器。所以理论上File System可用的空间非常大。
二、手机浏览器支持离线缓存的情况
测试采用的写数据的方式是key-value对，其中value的值150k左右。
由于Web SQL,indexedDB和File System的可用空间容量与手机Temporary storage有关，故测试数据与手机机型和浏览器本身的状态有关，故上述数据仅供参考。测试的过程中还发现有些浏览器HTML5跑分，分数虽然拿到了， 但是实际并没有完全实现相关标准。
测试结果显示，手机浏览器对Web SQL,indexedDB和File System支持情况参差不齐，除了chrome支持所有的三种标准之外，其它的手机浏览器支持都不全，对于开发者来说，如果想要用到这些技术，必须先探 测浏览器是否支持该标准，只有支持了才可以使用相关的API。为了使开发者透明地使用底层的离线缓存空间，使用者不用自己去测探浏览器究竟支持哪种或者哪 几种标准，现在作者开发了一个HTML5离线缓存管理库，用户便可以像调用localstorage一样调用相关的接口即可获取数据，为开发者提供最大的 便利。
三、HTML5离线缓存管理库的设计
1、接口设计
在web前端开发的过程中，开发者localstorage的接口使用相对熟悉，故HTML5离线缓存管理库采用类localstorage的接口，异步的调用方式。
设置（key，value）值对
cache.setItem(key, value, suc, err)
key: string类型
value: string类型
suc：设置成功的回调函数
err：设置失败的回调函数
获取键值为key的值
cache.getItem(key, suc, err)
key: string类型
suc：获取成功的回调函数
err：获取失败的回调函数
删除键值为key的项
cache.removeItem(key, suc, err)
key: string类型
suc：删除成功的回调函数
err：删除失败的回调函数
清除所有记录
cache.clear(suc, err)
suc：清除所有记录成功的回调函数
err：清除所有记录失败的回调函数
2、总体设计
HTML5离线缓存管理库采用的优先适配的策略，优先级为Web SQL > File System> indexedDB >localstorage。即js会自动对浏览器就行检测，如果发现支持web SQL，则使用web SQL，如果不支持，则接着检测File System，如果支持则会使用File System，以此类推。
至于为什么将优先级设置为：web SQL > File System> indexedDB >localstorage，主要是基于以下几方面做考虑：
虽然Web SQL是个逐渐废弃的标准，但是目前是浏览支持得最为广泛的技术，而且效率最高，速度最快，稳定性最好，故将其作为首选。
本库对外提供的接口是key-value对的形式，而File System是以文件的形式存在的，为了达到接口的要求需要封装和解析，导致效率下降，故将它的优先级位于web SQL之后，但是它可供使用空间的大小最大，所有将它放在indexedDB之前。
indexedDB将取代Web SQL，但是indexedDB的规范在持续更新中，目前并没有完全形成一个最终的标准，这体现在一些接口的更迭（本缓存库有做兼容），而且支持 indexedDB的浏览器很少，且支持情况不是很好，故将其仅放在localstorage之前。
localstorage存储空间最小，支持最为广泛，故作为一个最保险的后备方案。
为了保证对外提供的是统一的接口，接口传入的数据格式是key-value对的形式，但是由于File System本身是以文件的方式存储数据，所以不太适合处理key-value这类数据。
本库采用的数据存储方式是将key-value保存为JSON格式，通过JSON.stringify将其转化为字符串，并保存到文件中，读取的时候，通过JSON.parse将文件中数据解析为JSON格式。
为了提高File System的存取效率，采用了两种优化策略。首先将数据存于多个文件之中，根据key建立hash映射，每次读取数据，直接从相应的文件中取，这种方式 相对于存到一个文件的方式优点是，文件小，故每次读取的数据量小；其次采取缓存的策略，初始化的时候，将文件读取到内存之中，之后每次读取数据的时候直接 从内存中取数据即可，这样相比于每次直接从文件中读取数据，效率得到了极大的提升，当更改数据的时候会将缓存中的数据flush到文件中。
3、兼容性问题
由于HTML5相关标准在持续更新中，API随着标准的跟进，也有所变化，如下是一些比较大的改变。
File System
BlobBuilder构造函数被启用，应该使用Blob构造函数，例如：
旧的调用方式：
var bb = new BlobBuilder();
bb.append(JSON.stringify(t.cache[name]));
write.write(bb.getBlob(‘text/plain‘));
新的调用方式：
var bb = new Blob([JSON.stringify(t.cache[name])], {type: "text/plain"});
write.write(bb);
Web SQL
setVersion()方法被废弃，这导致我们在创建数据库和createObjectStore的流程有一些变动，而且多了一些新的回调方法。
//注意区别以前的方法，这里第二个参数不再是description，而是数据库版本号
var request = indexedDB.open(‘mydb‘,1);
request.onsuccess = function(e) { //数据库打开成功回调
DB.db = e.target.result; //我们用DB.db来存放indexdb
callback();
};
//第一次打开数据库或数据库升级时会触发，完成后根据情况触发success或者error
request.onupgradeneeded = function(e){
DB.db = e.target.result;
var db = DB.db;
//createObjectStore,以前需要在setVersion时才能执行。
if(!DB.db.objectStoreNames.contains(‘notes‘)){
// create object store
var store = db.createObjectStore(‘notes‘, {keyPath:‘id‘, autoIncrement:true})
store.createIndex(‘updated‘, ‘updated‘, { unique: false });
}
};
request.onerror = function(e){ //数据库打开错误回调
console.log(e);
}
四、测试
1.测试说明
使用HTML5离线缓存库的测试页面如下：
使用方法：
1.测试setItem
主要测试setItem接口，设置key-value。
2.测试getItem
主要测试getItem接口，根据用户输入的key，点击“确定”，查询对应的记录，如果查询不到对应的记录，value框为空；如果查询到对应的记录，value框中显示查询的结果。
3.测试removeItem
主要测试removeItem接口，用户输入key，点击“确定”后删除key对应的记录。
4.测试clear
主要测试clear接口，点击“确定”，删除所有的记录。
5.自动测试
连续写入key-value数据，其中key为“1”，“2”，“3”递增，value为160.6k的固定字符串。点击“开始”，连续写入该 key-value数据，直到点击“结束”或者离线缓存写满为止；点击“结束”，停止自动写数据。如果重复“开始”操作，需要刷新页面。
2.测试结果
使用HTML5离线缓存管理库对部分手机浏览器的测试结果如下：
3.源文件
HTML5离线缓存管理库的测试链接：
http://3gimg.qq.com/cube/cache/index-1.0.html
五、同步插件
1.使用说明
鉴于前端开发者比较习惯使用同步API，而Web SQL,indexedDB和File System都提供异步API，为了方便开发者，笔者为“HTML5 离线缓存管理库”提供了一个同步插件，方便开发者同步调用相关API，供参考。
“HTML5 离线缓存管理库”的同步插件使用说明：
优点：
(1) 方便开发者使用“HTML5 离线缓存管理库”进行同步操作，开发者可以像调用localstorage的方式同步调用相关接口。
(2) 调用者只需初始化一次，在初始化成功后便可进行余下操作。
(3) 由于开发者调用的接口其实都是从内存中取得数据，故速度比较快，flush等操作让后台处理。
缺点：
(1) 离线缓存方式fileSystem,indexdb和webSQL系统提供的API就是异步的方式，为了封装接口提供同步的API，必然有效率上的损失。 因为启动时会一次性加载离线缓冲库中的所有数据，故获取数据的时间会相应变长，对于少量数据，可以忽略不计，如果数据量特别大，即该插件会明显减慢加载速 度。
(2) 数据会全部拷贝到内存中，会占用部分浏览器内存。
建议：
该插件式为了方便同步使用离线缓存库，对于小数据量很方便，对于大数据来说，不推荐使用该插件，建议都采用异步的方式调用离线缓存库提供的接口API。
注：正常使用该库的时候必须保证synCache初始化成功。
2.源文件
HTML5离线缓存管理库的同步插件链接：
http://3gimg.qq.com/cube/cache/cache_plugin_sync-1.0.js
目前，“手机酷站”iphone版使用了"HTML5离线缓存管理库"和“同步插件”，相关链接如下：
http://app.html5.qq.com/ip/index
学习软件行业，选择就业的机会更多，拿到的薪水也更可观，Web前端开发随着互联网的不断发展，就业前景更广泛。千锋教育重庆Web前端培训，专业的IT培训机构，全国15所城市都设有分校，是IT职业教育领先品牌，学员入学就签订就业协议，2017年毕业学员首次就业平均月薪10000元，强大的师资力量与完善的就业体系，让你高薪就业不再是梦想!
*请认真填写需求信息，我们会在24小时内与您取得联系。
