1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-03-03 14:52:10

文件缓存页面缓存机制manifest一个当前图片缓存机制

HTML 5缓存机制:Cache Manifest配置实例 - 摘要: 本文讲的是HTML 5缓存机制:Cache Manifest配置实例, Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人

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

一、Cache Manifest基础知识

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

◆MIME TYPE:text/cache-manifest

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

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

二、如何实现

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

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

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


  1. AddType text/cache-manifest manifest 

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


  1. CACHE MANIFEST  
  2.  
  3. # VERSION 0.3  
  4.  
  5. # 直接缓存的文件  
  6. CACHE:  
  7. abc.html  
  8. images/sofish.png  
  9. js/main.js  
  10. css/layout.css  
  11.  
  12. # 需要在时间在线的文件  
  13. NETWORK:  
  14. /wp-admin/  
  15.  
  16. # 替代方案  
  17. FALLBACK:  
  18. /ajax/ ajax.html 

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

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


  1. <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文件来当做为当前页面的代理,内容如下:


  1. <!DOCTYPE html> 
  2. <html  manifest="http://www.happinesz.cn/sofished.manifest"> 
  3. <head> 
  4.         <meta charset=utf-8 /> 
  5.         <title>cache</title> 
  6. </head> 
  7. <body> 
  8. hi sofish!  
  9. </body> 
  10. </html> 

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

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

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

五、总结

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

原文链接:http://www.happinesz.cn/archives/1449/

【编辑推荐】



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索文件 , 缓存 , 页面 , 缓存机制 , manifest , 一个 , 当前 图片缓存机制 html manifest、html5 manifest、cache manifest 配置、manifest.mf 配置文件、html5 manifest用法,以便于您获取更多的相关知识。

ehcache 缓存失效时间配置基础问题?

问题描述 ehcache 缓存失效时间配置基础问题? 设置默认缓存失效时间5分钟无效,5分钟之后仍然可以访问缓存,配置如下: &lt;?xml version="1.0" encoding="GB2312"?&gt; http://www.w3.org/2001/XMLSchema-ins...

HTML5中应用程序离线缓存Application Cache实例教程

...可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。 Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,...

HTML5中的Application Cache 实现离线缓存

Cache Manifest 基础 如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性: ...每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面...

前端几种存储方式的总结

...ion cache) 本地缓存应用所需的文件 使用方法: ①配置manifest文件 页面上: 1 2 3 4 ... Manifest 文件: manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。 manifest 文件可分为三个部分: ...

详解javascript 存储

...储大小:5m缺陷:      由于原理上,application cache是把manifest上的资源一起下载下来,所以manifest里的内容不宜过多,数据量不宜过大;由于manifest的解析通常以页面刷新为触发点,且更新的缓存不会立即被使用,所以缓存的资...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备