首先先上一张图：

用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. 【NuGet】打包上传一条龙服务

    昨天写了搭建自己的NuGet程序源,但是领导不满意之前的打包上传~~,无奈只能去爬点思路了,这里参考的其他博文,但是还是想写下来. 第一步.建立一个批处理文件 在文件里,有三条命令: nuget pa ...

  2. C++-文件【1】-按行读文本文件的两种方法

    测试环境—— 系统:Win7 64bit 编译器:TDM-GCC 4.9.2 64-bit Release #include <iostream> #include <fstream ...

  3. 从零开始山寨Caffe·陆：IO系统(一)

    你说你学过操作系统这门课?写个无Bug的生产者和消费者模型试试! ——你真的学好了操作系统这门课嘛? 在第壹章,展示过这样图: 其中,左半部分构成了新版Caffe最恼人.最庞大的IO系统. 也是历来最 ...

  4. ACM ：漫漫上学路 -DP -水题

    CSU 1772 漫漫上学路 Time Limit: 1000MS   Memory Limit: 131072KB   64bit IO Format: %lld & %llu Submit ...

  5. Linux文件系统

    今天学习了Linux文件系统,现在来做个小总结. 首先Linux中一切都是文件,下面这个清单是Linux系统的顶层目录结构. 清单 1. Linux 系统的顶层目录结构 / 根目录 ├── bin 存 ...

  6. 第三周作业（一）：安装VS以及创建单元测试

    安装的时候找的是最新版本的VS2015,因为不想花钱也不想用破解版,所以用社区版本. 下了一个IOS文件,社区版VS2015,个人免费版,强行表示不用盗版来表现自己高尚的情操:D 放入虚拟光驱软件后, ...

  7. Linux Shell 重定向与管道【转帖】

    by 程默 在了解重定向之前,我们先来看看linux 的文件描述符. linux文件描述符:可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以 ...

  8. 【Beta】Daily Scrum Meeting第一次

    1.任务进度 学号 已完成 接下去要做 502 更换网络框架为okHttp 搭建好PHP单元测试环境,写出PHP测试的demo 509 PHP的login返回值:插入数据改为单行插入:系负责人更新单行 ...

  9. winhttp demo

    #include <string>#include <iostream>#include <windows.h>#include <winhttp.h> ...

  10. Repeater的分页

      Repeater控件是个好东西.轻量级.又好用.完全的自定义.但是,正是因为这些优点它没有自动分页的功能.这个需要研究一下.我看了一下起点等小说网站,那些什么推荐排名榜用Repeater控件那是很 ...