、什么是应用程序缓存:
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页面速度会变快,或者服务器没有连接上,本地也可以显示页面数据
ocalStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异,如使用方法、最大存储空间等。
下面我们用sessionStorage写一个本地缓存类
先建一个缓存对象
2.这个对象里有以下方法
整体代码
3.使用
var ArtStorage = new ArtStorage();
//设置
ArtStorage.set(key,value,0)//键,值,缓存时间(单位秒,0表示不超时)
获取
alert(ArtStorage.get(key));
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条由于浏览器内部机制,目前还无法满足。
*请认真填写需求信息,我们会在24小时内与您取得联系。