首先先上一张图：

用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属性里附加上你编写的缓存清单文件就可以啦，
  比如我写的就是：
<html manifest="cache_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页面代码如下：

<!DOCTYPE html>
<html manifest="cache_manifest">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
          <img src="http://cherry037.github.io/task7/images/middle-left.jpg"  style="width:400px;height:200px;"/>
          <img src="http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg"  style="width:400px;height:400px;"/>
    </body>
</html>
当网络状态联通时，demo如下，两张图片都能正常显示：

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

 

HTML5应用缓存机制的更多相关文章

  1. HTML5 离线缓存管理库

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

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

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

  3. HTML5离线缓存Manifest

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

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

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

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

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

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

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

  7. H5离线缓存机制-manifest

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

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

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...

  9. http 协议_DNS_域名解析 DNS 服务器_内容分发网络 CDN_缓存机制_HTML5 浏览器存储技术_cookie_sessionStorage_localStorage

    TCP/IP 协议族 是按层次去划分的 应用层    决定了向用户提供应用服务时通信的活动. FTP 协议(文件传输协议)DNS(域名协议)HTTP(超文本传输协议) 传输层    提供处于网络连接中 ...

随机推荐

  1. three.js加载obj模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 使用Android Butterknife

    我之前浏览过android butterknife 的使用 在android studio 中,很惊喜,已经成为一个插件来使用 这个android butterknife 最大的用处,就是直接生成la ...

  3. STDIN(0), STDOUT(1), STDERR(2), 2 > &1

    当我们在 shell 中执行命令的时候,每个进程都和三个打开的文件相联系,并使用文件描述符(文件描述符是一个简单的整数,用以标明每一个被进程所打开的文件和socket.第一个打开的文件是0,第二个是1 ...

  4. 网站常用UI整理

    1.UI插件包使用   Bootstrap 地址:http://v3.bootcss.com/getting-started/     Bootstrap buttons 按钮 地址:http://w ...

  5. Ubuntu 14.04安装Cinnamon桌面环境

    2014年05月26日 薄荷开源网,mintos,网如其名,自然最关注的还是 Linux Mint 这个 DistroWatch 排名第一的 Linux 发行版.奈何此前的 Linux Mint 17 ...

  6. webservice 小小例子

    Web Service的主要目标是跨平台的可互操作性.为了实现这一目标,Web Service 完全基于XML(可扩展标记语言).XSD(XML Schema)等独立于平台.独立于软件供应商的标准,是 ...

  7. centos7 apache提供文件下载

    1 apache安装 # yum -yinstall httpd //安装httpd会自动安装以下的依赖包: apr apr-util httpd-tools mailcap # rpm -qi ht ...

  8. easyui-conbotree树形下拉框。。。转

    最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...

  9. sql编写将时间转换年月日 时分格式

    SELECT SUBSTRING(CONVERT(varchar(100),时间字段, 22),0,15) AS aa  FROM  表名

  10. Html5 中的新语义标签

    1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更 ...