前两天面试,问到延迟加载和缓存页面资源的问题,最后问用没用过manifest。“真没用过啊,实话!”今天就来玩一玩manifest。
目录
1.Application Cache是什么
2.Manifest文件是什么
3.如何更新缓存
4.实例
5.疑问
使用HTML5,通过创建cache manifest文件,可以轻松地创建web应用的离线版本。
1.Application Cache是什么
HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览-用户可在应用离线时使用它们
- 速度-已缓存资源加载得更快
- 减少服务器负载-浏览器将只从服务器下载更新或更改过的资源
2.Manifest文件是什么
manifest文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest文件可分为三部分:
- CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存
- NETWORK-在此标题下列出的文件需要与服务器连接,且不会被缓存
- FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(如404页面)
3.如何更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改
- 由程序来更新应用缓存
在manifest文件中,加入日期或则版本号用来修改文件内容,进而去更新被manifest缓存的文件。
Tips:可以通过使用提供的例子,手工修改version号验证缓存的更新
我的manifest文件:my.appcache,文件后缀名为:appcache
CACHE MANIFEST #VERSION 44 # 直接缓存的文件 CACHE: ./images/a.png #需要在时间在线的文件 NETWORK: ./js/jquery.js # 替代方案 FALLBACK: / /Test/b.html #./x.css /Test/a.css
分析:
CACHE MANIFEST是必须的,表明是MANIFEST文件
#是注释
CACHE:表明需要缓存的资源,此处只缓存a.png,本页面不做缓存
NETWORK:表明在线加载的资源,在线加载jquery.js
FALLBACK:当访问某个错误路径时,都转到b.html
4.实例
a.html
<!DOCTYPE> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link href="x.css" rel="stylesheet" /> </head> <body> <iframe style="display:none;" src="cache.html"></iframe> <div>hello <img src="./images/a.png" > </div> <script type="text/javascript" src="js/jquery.js"></script> </body> </html>
cache.html
<!DOCTYPE> <html manifest="./my.appcache"> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> </body> </html>
你是不是迫不及待的想下载实例玩一把,看看缓存效果了?稍等,还差一步,就是tomcat的配置,需要在tomcat下的conf/web.xml中追加以下内容(copy过去即可),让tomcat认识manifest文件。
<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
OK,保存重启tomcat,在浏览器中输入:http://localhost:8081/Test/a.html
可以看到以下内容:
斗胆翻译一下:
1.访问a.html页面
2.通过manifest文件,从Application Cache中下载了文档
3.Checking Event:当浏览器访问一个页面(cache.html)时并且读到了HTML元素的manifest属性时发生
4.Downloading Event:假如浏览器从未访问过manifest文件,它将下载文件中的所有资源
5.Progress:包含已经下载和余下未下载的文件的信息
6.Updateready:在重新下载完毕,这个事件被触发,意味着新的离线版本准备被使用
说明:为什么要在本页加个iframe呢?
我们设置的需要缓存的文件都会缓存,而且引用manifest的那个页面也被缓存了。这个很重要,这个是manifest的机制,它除了会缓存设置好的文件之外,还会缓存当前引用manifest文件的页面。这样我在修改当前页面内容的时候,浏览器端不会有变化,如果我不想缓存当前页面,我想在当前页面修改后,立马看到效果,怎么办?加入一个iframe引用cache页面,浏览器会缓存cache.html,不会缓存a.html页面。
5.疑问
我个人研究没有很深入,在FALLBACK中,如果写替换的跳转页面可以使用,但是写替换的css,图片等资源时,可以看到确实做了请求替换,但是页面并未出现效果,css未改,图片未显示出来,这里没有搞清原理,希望进行探讨。
W3CSCHOOL上的介绍:
相关推荐
grunt-manifest, 生成HTML5缓存清单文件 grunt清单 生成HTML5缓存 Manifest 文件。正在启动这个插件需要 Grunt ~0.4.5If之前,请务必先查看一下如何创建 Gruntfile插件,以及安装和使用Grunt插件。 熟悉该过程后,你...
当我们需要运行一个与其他jar文件有关联jar文件时,如果jar文件里面的MANIFEST.MF文件没有配置好,那在运行时就要报异常:Exception in thread "main" java.lang.NoClassDefFoundError。原因:未找到关联jar文件里面...
VB6实现XP风格 MANIFEST文件
缓存清单 Servlet介绍HTML5 提供了很棒的功能此功能基于cache.manifest文件,浏览器使用该文件来确定应在离线模式下访问哪些资源。 每次打开页面浏览器时,都使用页面和资源的缓存版本,但是在后台检查cache....
主要介绍了详解HTML5中的manifest缓存使用,文中同时介绍了相关的一些自动化工具,需要的朋友可以参考下
HTNL5+ HBuilder移动应用manifest文件配置指南,官方文档,详细讲解了HBuilder manifest文件的每一个设置细节。
可以对安卓apk包的manifest文件,反编译,可以看名文了。
MANIFEST文件配置,讲解MANIFEST文件内容信息,JAD内容,实用~~~
HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势: 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源,因此加载速度较快。 ...
web app不比PC,有性能和流量方面...3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。 如何使用? XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html manifest="demo.appc
windows下用mt将manifest文件压缩进exe文件,能够让经典win2000时代界面的exe变成xp以上操作系统界面风格,比如你有一个vb6com.exe,用上压缩包里vb6com.exe.manifest,一句命令Mt.exe -manifest "vb6...
VB用两种方法实现win7风格的窗体界面,一种是使用manifest 文件实现,另一种是使用Res资源文件实现,XP风格的manifest文件和win7风格的manifest文件不同,请不要混用,另外请使用5.0版的Microsoft.Windows.Common-...
一、作用 离线浏览 – 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件。... 再次载入页面时,便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。 当
PB的旧版本的控件都是方方正正的样式,比较难看,使用manifest文件可以使这些标准控件编程windows样式
Manifest.xml文件的作用和简单使用