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(超文本传输协议) 传输层 提供处于网络连接中 ...
随机推荐
- Unity插件使用总结
移动文件夹位置会引起错误的插件:EasySave2.MaterialUI.Gamestrap UI.Beautify
- WinForm开发笔记
Button Button默认不产生DoubleClick事件 (MSDN说明:https://msdn.microsoft.com/zh-cn/library/system.windows.form ...
- bzoj1103树状数组水题
(卧槽,居然规定了修改的两点直接相连,亏我想半天) 非常水的题,用dfs序(而且不用重复,应该是直接规模为n的dfs序)+树状数组可以轻松水 收获:树状数组一遍A(没啥好骄傲的,那么简单的东西) #i ...
- c#/js代码命名规范及代码规范
常用命名 列表,lUser 数组,arrUser 字符串,strTitle 用,分割的字符串,strStatuss(多个用逗号分割的状态) C# Entity层 统一以E开始,比如EUser,EOrd ...
- STM32之ADC+步骤小技巧（英文）
神通广大的各位互联网的网友们.大家早上中午晚上好好好.今早起来很准时的收到了两条10086的扣月租的信息.心痛不已.怀着这心情.又开始了STM32的研究.早上做了计算机控制的PID实验,又让我想起了飞 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- ThreadPoolExecutor源码学习（2）-- 在thrift中的应用
thrift作为一个从底到上除去业务逻辑代码,可以生成多种语言客户端以及服务器代码,涵盖了网络,IO,进程,线程管理的框架,着实庞大,不过它层次清晰,4层每层解决不同的问题,可以按需取用,相当方便. ...
- MySQL Can't connect to MySQL server on 'localhost' (10061)
run > services.msc > rightclick MySQL > properties >start 搞定
- Unity3D上可以发布到IOS使用的SQLite数据库
地址:https://github.com/codecoding/SQLite4Unity3d Unity5.1.1f 发布,在IOS 8.3上亲测可用,Android好像有点问题. 也可用参考下这个 ...
- ThinkPHP5 助手函数
对于ThinkPHP5.0以前的版本,助手函数全部是单字母函数,但到ThinkPHP5之后,使用如下函数来代替单字母函数: 最常用: /** * 实例化Model * @param string $n ...