html5中的应用缓存,HTML5应用缓存机制

首先先上一张图：

用360浏览器的用户对这张图应该都是耳熟能详了吧，没错，当网络不通畅时使用360浏览器，便会有这张图弹出来。为什么没有网络还能弹出这一副画面呢？这就关乎HTML5的应用缓存机制了。

那什么是应用缓存机制呢？

应用缓存，是专门从浏览器的缓存中分出一块缓存区用于缓存数据，从而在离线状态下也能读取和使用该数据，这就是应用缓存，或者说叫appcache

怎么使用应用缓存？

首先，我们需要新建一个自定义的清单文件(manifest file)，在这里我先将其命名为"cache_manifest"

然后其中的具体代码格式见下：

CACHE MANIFEST

# version1

CACHE:

# 这里放直接缓存的文件

NETWORK:

# 这里放的文件不缓存，不能离线读取，只能在线读取

FALLBACK:

# 这里放备份文件

<1>首先在开头必须声明CACHE MANIFEST这一行代码(必需)

<2>可用“#”符号进行注释

<3>具体内容可分为三块：

CACHE:这里放的是需要直接缓存的文件

NETWORK:这里放的文件不缓存，不能离线读取，只能在线读取

FALLBACK:  这里放备份文件,比如页面无法访问时的回退页面( 404 页面)

<4>放置的文件可以是js文件，css文件，html文件，也可以是各种格式的图片等，如下：

CACHE MANIFEST

# version1

CACHE:

img/0.jpg

index.html

js/task.js

css/mycss.css

NETWORK:

FALLBACK:

<5>怎么使用上面缓存清单文件(manifest file)呢？只要在当前的html的manifest属性里附加上你编写的缓存清单文件就可以啦，

比如我写的就是：

下面我具体演示一下：

这里有两张在云端的图片，第一张地址是http://cherry037.github.io/task7/images/middle-left.jpg(在此称之为男子西装图吧)

第二张图地址是：http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg(在此称之为黄衣女人图吧)

我的清单缓存文件名称为cache_manifest

CACHE MANIFEST

# version1

CACHE:

http://cherry037.github.io/task7/images/middle-left.jpg

NETWORK:

http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg

FALLBACK:

# 这里放备份文件

HTML页面代码如下：

当网络状态联通时，demo如下，两张图片都能正常显示：

当我开启飞行模式，离线状态开启时，demo如下，“男人西装图”仍然能正常显示，说明通过缓存清单文件它已经被成功缓存起来了，而“黄衣女人图”则因为被设置为不缓存所以显示为一张默认的图片了

HTML5 离线缓存管理库

一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

H5 缓存机制浅析 移动端 Web 加载性能优化

腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

HTML5离线缓存Manifest

web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

进击的Hybrid App，量身定做缓存机制

引用张图,简单粗俗的解释下 Native App.Web App 和 Hybrid App Navtie App: 使用平台系统提供的原生语言来编写的 App,如果Android用java,ios用o ...

HTML 5缓存机制：Cache Manifest配置实例

Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然[color=#444444 !important]应用起来非常简单,但效果却出奇的好.缓存后的速度,简直是 ...

Java缓存学习之二：浏览器缓存机制

浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存 ...

H5离线缓存机制-manifest

简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

H5 和移动端 WebView 缓存机制解析与实战