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(超文本传输协议) 传输层 提供处于网络连接中 ...
随机推荐
- Java随机生成18位身份证号
package com.ihome.data; import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut ...
- 2016-2017 ACM-ICPC Asia-Bangkok Regional Contest
A. WSI Extreme 将人按洗澡时间从大到小排序,那么$ans=\sum_{i=1}^{n}a_i\times\lfloor\frac{i+W-1}{W}\rfloor$. 当$W$比较大时, ...
- Ajax工作流程
Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求. 主要有以下四个步骤: (1)初始化XMLHttpRequest对象.不同浏览器的差异,需要我们创建一个跨浏览器的对象,并判 ...
- Android 开源项目及其学习
Android 系统研究:http://blog.csdn.net/luoshengyang/article/details/8923485 Android 腾讯技术人员博客 http://hukai ...
- [Leetcode] Repeated DNA Sequences
All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...
- 将excel数据读入matlab
1.[NUM,TXT,RAW]=xlsread('example'),其中example是你的excel名,假设所有的数据都在example.xls中. 2.NUM返回的是excel中的数据,TXT输 ...
- BZOJ2908: 又是nand
Description 首先知道A nand B=not(A and B) (运算操作限制了数位位数为K)比如2 nand 3,K=3,则2 nand 3=not (2 and 3)=not 2=5. ...
- JSON相关知识，转载：删除JSON中数组删除操作
一:JSON是什么 JSONg格式:对象是一个无序的“名称/值”对的集合. 对象以括号开始,括号结束. 名称冒号分隔值. "名称/值"之间用逗号分隔 例: var people = ...
- Code of Conduct
v
- (转)windows系统下Python环境的搭建
原博文地址:http://www.cnblogs.com/windinsky/archive/2012/09/20/2695520.html 这段时间在做python,觉得这个配置环境的帖子还不错,分 ...