HTML 5缓存机制：Cache Manifest配置实例
日期：2014-03-29 浏览次数：21178 次
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 中添加：
- 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> <
