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(超文本传输协议) 传输层 提供处于网络连接中 ...
随机推荐
- [转]Windows7文件夹转移清理臃肿的C盘
当你使用Windows的时候,你会发现无论哪个版本的Windows,系统都会默认将用户文件夹和程序数据文件夹(xp下是Documents and Settings文件夹,而windows7和vista ...
- GruntJS常用前端流程自动化配置-【持续优化】
前言 近期用Grunt进行前端开发经常要用到的一些Grunt插件,用起来非常顺手. 一.package.json文件配置如下: 包括coffeescript编译为js,css加CSS3适配前缀,css ...
- Git 基本概念及常用命令
一.基本概念 文件的三种状态:(任何一个文件在git中都有以下三种状态) 1) 已提交(committed):表示该文件已经被安全地保存在本地数据库中了. 2) 已修改(modified):表示修改了 ...
- js 短信验证码 计时器
$(function(){ getMsg(); //页面加载完成之后执行 }) function getMsg(){ //注册按钮的点击事件 $("#smsBtn").on(&qu ...
- #ifdef _DEBUG #undef THIS_FILE static char THIS_FILE[]=__FILE__; #endif
情况1:#ifdef _DEBUGvirtual void AssertValid() const; //assert(断言)valid(有效的,正确的)virtual ...
- 定时任务crontab 例子
查看定时任务格式 [root@centos ~]# vim /etc/crontab 1 SHELL=/bin/bash 2 PATH=/sbin:/bin:/usr/sbin:/usr/bin 3 ...
- iOS 10 开发问题总结
兼容iOS 10 资料整理笔记 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大 ...
- SQL 表的完整性
建立:主外键,约束.(删除主表的时候,同时删除子表:更新主表的时候更新子表) 1.建表时定义主键 Create table 表名 ( Sno int identity(1,1), Sname nvar ...
- 2016huasacm暑假集训训练五 J - Max Sum
题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/J 题意:求一段子的连续最大和,只要每个数都大于0 那么就会一直增加,所以只要和0 ...
- JSP页面以及JSP九大隐式对象
JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比 ...