HTML5应用缓存机制
首先先上一张图：
用360浏览器的用户对这张图应该都是耳熟能详了吧，没错，当网络不通畅时使用360浏览器，便会有这张图弹出来。为什么没有网络还能弹出这一副画面呢？这就关乎HTML5的应用缓存机制了。
那什么是应用缓存机制呢？
应用缓存，是专门从浏览器的缓存中分出一块缓存区用于缓存数据，从而在离线状态下也能读取和使用该数据，这就是应用缓存，或者说叫appcache
怎么使用应用缓存？
首先，我们需要新建一个自定义的清单文件（manifest file），在这里我先将其命名为"cache_manifest"
然后其中的具体代码格式见下：
CACHE MANIFEST # version1 CACHE: # 这里放直接缓存的文件 NETWORK: # 这里放的文件不缓存，不能离线读取，只能在线读取 FALLBACK: # 这里放备份文件
<1>首先在开头必须声明CACHE MANIFEST这一行代码（必需）
<2>可用“#”符号进行注释
<3>具体内容可分为三块：
- CACHE:这里放的是需要直接缓存的文件
- NETWORK:这里放的文件不缓存，不能离线读取，只能在线读取
- FALLBACK: 这里放备份文件,比如页面无法访问时的回退页面（ 404 页面）
CACHE MANIFEST # version1 CACHE: img/0.jpg index.html js/task.js css/mycss.css NETWORK: FALLBACK:
<html manifest="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如下，“男人西装图”仍然能正常显示，说明通过缓存清单文件它已经被成功缓存起来了，而“黄衣女人图”则因为被设置为不缓存所以显示为一张默认的图片了
HTML5应用缓存机制的更多相关文章
- 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 缓存机制解析与实战
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...
- http 协议_DNS_域名解析 DNS 服务器_内容分发网络 CDN_缓存机制_HTML5 浏览器存储技术_cookie_sessionStorage_localStorage
TCP/IP 协议族 是按层次去划分的 应用层 决定了向用户提供应用服务时通信的活动. FTP 协议(文件传输协议)DNS(域名协议)HTTP(超文本传输协议) 传输层 提供处于网络连接中 ...
随机推荐
- QT5之三大重要窗体
当创建项目时,会发现编辑器提供三个基类,分别为:QMainWindow.QWidget.QDialog,三个基类的区别说明如下.1.QMainWindowQMainWindow类提供一个有菜单条.锚接 ...
- csv
csv 文件的读写:http://www.cnblogs.com/fiozhao/p/3225112.html 求取一个立方体的对角线穿个的边长为1的正方体的个数:http://www.cnblogs ...
- __autoload()尝试加载未定义的类
在PHP5之前,如果需要使用一个类,只需要直接使用include/require将其包含进来即可.PHP5 以后提供了这样一个方法可以自动完成加载所需的类文件. 参见官网的例子: ./myClass. ...
- 如何发布付费WP8应用
如何发布付费应用,听起来蛮简单的,事实上也确实如此,但是发布付费WP8应用前的资料填写却让我郁闷不已. 我打开仪表板,点击进入账户--账户摘要,填写税务资料和付款账户,发现付款账户保存成功了,税务资料 ...
- WP8解析JSON格式（使用DataContractJsonSerializer类）（推荐）
DataContractJsonSerializer是.NET自带的类,在解析JSON格式的时候使用起来方便快捷,至于生成方面由于暂时没用到就没去看了.使用需要引用System.Runtime.Ser ...
- Android 无标题 全屏设置
标题栏和状态栏 Android程序默认情况下是包含状态栏和标题栏的. 在Eclipse中新建一个Android程序,运行后显示如下: 图中标出了状态栏(显示时间.电池电量.网络等)和标题栏(显示应用的 ...
- angularJS 杂
慎用ng-repeat 中的 $index http://web.jobbole.com/82470/ 服务provider,公共代码的抽象 (语法糖)分为: constant常量:constant初 ...
- JavaMail和James的秘密花园
JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.我们可以基于JavaMail开发出类似于Micros ...
- Shell下突破安全狗远程桌面守护
首先在Shell下把安全狗的安装配置给下来 默认安装路径: C:\Program Files\SafedogServer\SafeDogGuardCenter 找到 ProGuardData.ini ...
- Unity3D 物体跟随鼠标旋转
float speed=1000f; void Update () { if (Input.GetMouseButton (0)) { transform.Rotate (0,-Input.GetAx ...