HTML5缓存Cache Manifest实例讲解

Cache Manifest是HTML5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍。

一、Cache Manifest基础知识

作为一个Web开发相关的人员,都不会少听到、看到Cache这个词。是的,上面也已经说了,它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件,这里进行了简单的整理:

◆MIME TYPE:text/cache-manifest

◆需要由你创建的:NAME.manifest

◆作用:主要是配置需要缓存的文件

二、如何实现

实现起来倒是非常简单(当然,这也是有问题的,这个我们后面讲解决方案),实现步骤如下:

1.在服务器上添加MIME TYPE支

比如 Apache 中可在 .htaccess 中添加:

以下是引用片段:
AddType text/cache-manifest manifest 

2.创建NAME.manifest:

其中第一行的CACHE MANIFEST标识是一定要有的,而CACHE/NETWORK/FACKBACK 都是可选的。如果没有写标识,则默认缓存,Cache就不用说了,缓存;NETWORK指不想缓存的页面,比如登陆页等;FALLBACK 是指当没有响应时的替代方案,比如我想请求某个页面,但这个页面的服务器挂了,那么,我可以显示另外一个指定的页面,文件结构如下:

以下是引用片段:
CACHE MANIFEST    
# VERSION 0.3    
# 直接缓存的文件   
CACHE:  abc.html   
images/sofish.png   
js/main.js   
css/layout.css   
# 需要在时间在线的文件   
NETWORK:   
/wp-admin/    
# 替代方案   
FALLBACK:  / 
ajax/ ajax.html 

至于如何更新这个配置文件?只要改变文件的内容即可,上面的# VERSION 0.3其实只是一行注释,但改变文件可以重新缓存,这样写上版本号,想更新的时候修改版本号来重新缓存,是一种比较推荐的方法,甚至可以是最佳实践。

3.给<html>标签加manifest属性

以下是引用片段:
<html manifest="path/to/NAME.manifest"> 

是的,就是如此简单,相信你花上30分钟也就了解了,而且能够快速的应用到工作中。

三、Cache Manifest 存在的问题

经过上面一整,速度明显快了许多,帮忙测试的人也小震惊了一下,只是,还是存在一些问题,看一下,然后我们尝试解决:

1.自动缓存引用了manifest文件的页面

即使在NETWORK 中指定 "*"(所有的页面都)使用网络,还是不能解决它自动缓存当前页面。这使得这个页面在 manifest 没有变更的情况下,会一直以"类静态"存在。比如,你后台更新了一篇文章,这个动态的首页,还是像第一次缓存的时候一样,没有变。这对于静态页面还好,但应用在一个动态系统就很麻烦了,因为你的内容是时时要更新的。

2.Firefox弹出提示信息

可能是习惯了弹窗警告之类的,一不小心,用户还以为是网站被人**呢,想把不干净的东西存储到他的电脑。

四、解决方案

(一)关于自动缓存当前页面

在《Pro HTML5 Programming》有这样一句话:这并不是Bug,而是机制的需要。虽然说这样会让页面载入更快,但对于动态页面来说就是恶心了。至少应该有一种让用户选择是否缓存当前页的配置方案(或者说是一个开关)。不过,这是暂时不能解决的,毕竟这还只是一个Draft,我们要用,就应该找一个合适的方案。

我的想法是,看看大家有没有更好的办法。结果,查了一下,无果。新的东西,几乎所有文章说的都只是我上面说的那个如何去写一个manifest文件,看来还是没办法偷懒。然后,便开始想:

◆一定不要缓存动态的页面,当前页一定不能引用manifest文件。

◆能不能从其他页面先载入缓存?

那么,如果有解决方案的话,解决方法应该是:

◆不在当前页面引用manifest。

◆在用户打开页面之前,需要有一个页面来实现缓存机制。

如果这样,那么为何不试一下iframe来引入一个拥有manifest的静态文件?但用 iframe 还能会缓存到文件?经过一翻测试,Google Chrome的调试工具给了答案:结果很不错,成功缓存。做法是这样的,新建一个cache.html文件来当做为当前页面的代理,内容如下:

以下是引用片段:
<!DOCTYPE html>  
<html  manifest="http://www.happinesz.cn/sofished.manifest"> <head>          
<meta charset=utf-8 />          
<title>cache</title>  
</head>  
<body> hi sofish!   
</body>  
</html> 

然后,在每个页面通过iframe来引用这个静态文件,以达到我们不缓存当面页面,只缓存我们希望缓存文件的目的。

(二)关于Firefox 弹出警告问题

这个,浏览器默认的,浏览器厂商的目的是为用户的安全着想,我们暂时也改变不了。其实,也不会有太大的影响,我也没有好好去想。

五、总结

测试下来,其实跟缓存当前页面还是有差别的,毕竟像站外的链接,特别是gravatar总要请求这么多图片,这点就又多了一点时间了。这现象主要出现在 Firefox 下,而 Webkit 而表示非常棒,速度几乎和缓存当前面一样,第二次打开的页面,都是瞬间响应的,效果非常不错。

时间: 2024-12-27 20:47:42

HTML5缓存Cache Manifest实例讲解的相关文章

HTML 5缓存机制:Cache Manifest配置实例

Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好.缓存后的速度,简直是惊人的快.像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍. 一.Cache Manifest基础知识 作为一个Web开发相关的人员,都不会少听到.看到Cache这个词.是的,上面也已经说了,它是一种缓存的机制.它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件.而重点就是这个.man

Zend Framework缓存Cache用法简单实例_php实例

本文实例讲述了Zend Framework缓存Cache用法.分享给大家供大家参考,具体如下: <?php require 'Zend/Loader.php'; Zend_Loader::loadClass('Zend_Cache'); Zend_Loader::loadClass('Zend_Config'); Zend_Loader::loadClass('Zend_Registry'); $config = new Zend_Config_Ini('configsecr/config.in

实例讲解jquery与json的结合_jquery

通过AJAX异步减少网络内容传输,而JSON则可以把传输内容缩减到纯数据:然后利用jQuery内置的AJAX功能直接获得JSON格式的数据:在客户端直接绑定到数据控件里面,从而达到最优.1.设计htm页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

原创:.NET版分布式缓存Memcached测试实例

下面测试下分布式缓存Memcached软件,一直在学习关注大访问量网站的缓存是如何实现,之前看过Memcached的资料,忙于没有时间来真正测试一下,本文测试分布式缓存Memcached的环境如下:(两台电脑作为服务器) 第一台: CPU:Inter(R) Pentium(R) 4 CPU 2.8G 内存:1G 系统:windows 7 IIS: IIS 7 IP:172.10.1.97 环境:本地 安装:memcached 1.2.1 for Win32 第二台: CPU:Inter(R) P

JavaWeb文件上传下载实例讲解(酷炫的文件上传技术)_java

一.课程概述 在Web应用系统开发中,文件上传功能是非常常用的功能,今天来主要讲讲JavaWeb中的文件上传功能的相关技术实现,并且随着互联网技术的飞速发展,用户对网站的体验要求越来越高,在文件上传功能的技术上也出现许多创新点,例如异步上传文件,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,大文件断点续传,大文件秒传等等. 本课程需要的基础知识: 了解基本的Http协议内容 基本IO流操作技术 Servlet基础知识 javascript/jQuery技术基础知识 二.文件上传的基础 对于文件

PHP+Mysql+jQuery文件下载次数统计实例讲解_php实例

项目中我们需要统计文件的下载次数,用户每下载一次文件,相应的下载次数加1,类似的应用在很多下载站中用到.本文结合实例使用PHP+Mysql+jQuery,实现了点击文件,下载文件,次数累加的过程,整个过程非常流畅. 准备工作本实例需要读者具备PHP.Mysql.jQuery以及html.css等相关的基本知识,在开发示例前,需要准备Mysql数据表,本文假设有一张文件下载表downloads,用来记录文件名.保存在文件服务器上的文件名以及下载次数.前提是假设下载表中已存在数据,这些数据可能来自项

jQuery多级手风琴菜单实例讲解_jquery

手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单. HTML 首先在head间引用jQuery和插件. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascri

Android Studio应用开发集成百度语音合成使用方法实例讲解_Android

首先,语音合成是指将文本信息转换成声音.意思就是将文本转化为声音,让你的应用开口说话.国内在业内比较有名的第三方语音合成平台有百度语音和科大讯飞. 本文集成的是百度语音合成,其主要特点是: 完全永久免费 业界首创完全永久免费新形式,为开发者提供最流畅最自然的语音合成服务.完全免费,永久使用,彻底摆脱限制. 离线在线融合模式 SDK可以根据当前网络状况,自动判断使用本地引擎还是云端引擎进行语音合成,再也不用担心流量消耗! 多语言多音色可选 中文普通话.中英文混读.男声.女声任你选,更支持语速.音调

Java中常用缓存Cache机制的实现_java

缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. 缓存主要可分为二大类:    一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式:  二.内存缓存,也就是实现一个类中静态Map,对这个Map进行常规的增删查. import java.util.*; //Description: 管理缓存 //可扩展的功能:当chche到内存溢出时必须清