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(超文本传输协议) 传输层 提供处于网络连接中 ...
随机推荐
- Python for Infomatics 第13章 网页服务四（译）
这几天因为其他事务,打断了自己的学习计划,今天继续我的翻译,避免又中途而废. 注:文章原文为Dr. Charles Severance 的 <Python for Informatics> ...
- CODEVS1090 加分二叉树
codevs1090 加分二叉树 2003年NOIP全国联赛提高组 题目描述 Description 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点 ...
- bzoj3674同上（好短）
+强在 就过了 既没有启发式又没有路径压缩,连建树都用的是代码最短的写法(什么心态,每天追求代码短) 话说回来 可持久化的数组感觉只能出类似裸题的题目,,,,藏也藏不住啊 #include <c ...
- 【转载】64 位 Windows 内核虚拟地址空间布局（基于 X64 CPU）
原文链接:http://shayi1983.blog.51cto.com/4681835/1734822 本文为原创翻译,原文出处为 http://www.codemachine.com/articl ...
- PHP+JQUEY+AJAX实现分页【转】
HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left ...
- JS中检测数据类型的几种方式及优缺点【转】
1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...
- Docker Volume 之权限管理(转)
Volume数据卷是Docker的一个重要概念.数据卷是可供一个或多个容器使用的特殊目录,可以为容器应用存储提供有价值的特性: 持久化数据与容器的生命周期解耦:在容器删除之后数据卷中的内容可以保持.D ...
- Unity3d刚体Rigidbody与碰撞检测Collider
做了一个碰撞的小Demo,用一个球去撞击一堵墙,结果在球和墙都设置了刚体和碰撞体的情况下,球穿过了墙.移动球的位置,球有时能穿过墙,有时会被墙阻挡. 对于球穿过了墙,这个问题,在网上找了一下答案,基本 ...
- Unity自动寻路Navmesh之高级
隔离层自动生成寻路网格 (源码scene1.unity) 1.创建Plane实例P1,P2,两者之间出现一条鸿沟.直接控制角色位移是无法通过的. 2.打开Navigation窗口,分别选中P1,P2, ...
- java并发编程（十六）happen-before规则
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17348313 happen-before规则介绍 Java语言中有一个"先行发生 ...