首先先上一张图：

用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. ViewPager取消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  2. 如何在Web引用中使用项目自定义的类

    这个是老架构了,不推荐现在这么用,维护一个老项目记录一下. 项目中WebService和客户端是在一个解决方案下,实体类是一个公用的Project,如果使用Web引用自动生成的类会缺少一些实体类定义的 ...

  3. Redis 主从配置

    环境     Master/Slave     系统 IP Redis版本 Master     CentOS6.7         10.10.3.211         redis-3.2.6   ...

  4. 20161023 NOIP 模拟赛 T1 解题报告

    Task 1.纸盒子 (box.pas/box.c/box.cpp) [题目描述] Mcx是一个有轻度洁癖的小朋友.有一天,当他沉溺于数学卷子难以自拔的时候,恍惚间想起在自己当初学习概率的时候准备的一 ...

  5. IPv6进阶

    IPV6报文部分字段介绍 1.没有校验和字段:优点:当TTL减少时,不需要重新处理,相对于IPV4能减少处理的时间:缺点:必须在上层包含校验和2.下一个报文:可指向扩展报文:(大部分节点不处理和查看大 ...

  6. sql查询重复数据

    select *from Awhere id in (select id from A group by id having count(1) >= 2) 注释:id 为重复的关键字(更换成所需 ...

  7. HDU--最小路

    最小路 Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. LabVIEW 吸星大法 - 看见的好东西都是我的(中篇)

    前言 写了多年的LabVIEW程序,你是否面临这样的问题 总是在做一些重复的工作,感觉很没有意思: 总在不停的写代码,做类似的控件,实现相同的功能,丝毫没有成就感: 总在天加班,没有时间去提高自己; ...

  9. C#中分割字符串输出字符数组

    来自博客园 http://www.cnblogs.com/yugen/archive/2010/08/18/1802781.html   1.用字符串分隔: using System.Text.Reg ...

  10. CSS 页面顶部阴影和给浏览器强制加上滚动条

    /*给浏览器强制加上滚动条*/ html{height: 101%;} /*页面顶部阴影*/ body:before{ content: ""; position: fixed; ...