《HTML 5缓存机制：Cache Manifest配置实例》由会员分享，可在线阅读，更多相关《HTML 5缓存机制：Cache Manifest配置实例（6页珍藏版）》请在金锄头文库上搜索。
1、modules/article/templates / 文章系统模板modules/article/templates/blocks / 文章系统区块模板modules/forum/templates / 论坛系统模板modules/forum/templates/blocks / 论坛系统区块模板templates / 公用页面模板(例如用户档案)templates/blocks / 公用页面区块模板themes/default / 主要风格模板modules/article/templates/index.html / 目录页面modules/article/templates/style
2、.html / 章节内容modules/article/templates/fulltext.html / 全文阅读modules/article/templates/articleinfo.html / 书籍摘要页面themes/default/theme.html / 动态页面公用模板模板标签下面对 theme.html 模板中使用到的标签做简单的说明：在模板文件的 html 源代码中插入如下标签，即可在页面中显示出来相应内容。说明：V1.30 以下版本，标签格式为，V1.30 以上版本标签的格式为?XXX?，注意使用。/ 网页标题/ 网页字符集，对应后台系统定义中的“默认语言”/ 网页关
3、键字，对应后台系统定义中的“网站关键字”/ 网站描述，对应后台系统定义中的“网站描述”/ 作者/ 版权申明，对应后台系统定义中的“版权申明”/ 系统 CSS 引用，由系统自动生成/ 头部插入代码，对应后台系统定义中的“头部插入代码”/ 顶部通栏代码，对应后台系统定义中的“顶部通栏代码”/ 注册用户登入详细资料/ GB2313 编码的链接/ BIG5 编码的链接/ JIEQI CMS 图片文件夹路径/ JIEQI CMS 首页链接,对应后台系统定义中的“网站地址”/ BANNER 代码，对应后台系统定义中的“BANNER 代码”/ 联系 Email，对应后台系统定义中的“联系 Email”/ 系
4、统菜单，如果后台系统定义中“是否使用系统菜单”一项为是，则使用由 configs/mainmenu.php 定义的菜单项目/ 网站名称，对应后台系统定义中的“网站名称”/ 底部通栏代码，对应后台系统定义中的“底部部通栏代码”/ 顶部区块标题/ 顶部区块内容/ 左边区块标题/ 左边区块内容/ 中上区块标题/ 中上区块内容/ 中左区块标题/ 中左区块内容/ 中右区块标题/ 中右区块内容/ 中中区块标题/ 中中区块内容Cache Manifest 是 HTML5 的一种缓存机制，文章作者直接用博客当测试环境，虽然应用起来非常简单，但效果却出奇的好。缓存后的速度，简直是惊人的快。像 Yslow 显示，
5、打开一个缓存过的页面，只要 0.729 秒，比不缓存的差不多快了 10 倍。一、一、Cache Manifest 基础知识基础知识作为一个 Web 开发相关的人员，都不会少听到、看到 Cache 这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个.manifest 文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest 文件，这里进行了简单的整理：MIME TYPE：text/cache-manifest需要由你创建的：NAME.manifest作用：主要是配置需要缓存的文件二、如何实现二、如何实现实现起来倒是非常简单（当然，这也是有问题的，这个我们后
6、面讲解决方案），实现步骤如下：1.在服务器上添加 MIME TYPE 支比如 Apache 中可在 .htaccess 中添加：1.AddType text/cache-manifest manifest 2.创建 NAME.manifest:其中第一行的 CACHE MANIFEST 标识是一定要有的，而CACHE/NETWORK/FACKBACK 都是可选的。如果没有写标识，则默认缓存，Cache 就不用说了，缓存；NETWORK 指不想缓存的页面，比如登陆页等；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面，
7、文件结构如下：2.CACHE MANIFEST 3. 4.# VERSION 0.3 5. 6.# 直接缓存的文件 7.CACHE: 8.abc.html 9.images/sofish.png 10.js/main.js 11.css/layout.css 12. 13.# 需要在时间在线的文件 14.NETWORK: 15./wp-admin/ 16. 17.# 替代方案 18.FALLBACK: 19./ajax/ ajax.html 至于如何更新这个配置文件？只要改变文件的内容即可，上面的# VERSION 0.3 其实只是一行注释，但改变文件可以重新缓存，这样写上版本号，想更新的时候
8、修改版本号来重新缓存，是一种比较推荐的方法，甚至可以是最佳实践。3.给标签加 manifest 属性20. 是的，就是如此简单，相信你花上 30 分钟也就了解了，而且能够快速的应用到工作中。三、三、Cache Manifest 存在的问题存在的问题经过上面一整，速度明显快了许多，帮忙测试的人也小震惊了一下，只是，还是存在一些问题，看一下，然后我们尝试解决：1.自动缓存引用了 manifest 文件的页面即使在 NETWORK 中指定 “*“（所有的页面都）使用网络，还是不能解决它自动缓存当前页面。这使得这个页面在 manifest 没有变更的情况下，会一直以“类静态“存在。比如，你后台更新了一
9、篇文章，这个动态的首页，还是像第一次缓存的时候一样，没有变。这对于静态页面还好，但应用在一个动态系统就很麻烦了，因为你的内容是时时要更新的。2.Firefox 弹出提示信息可能是习惯了弹窗警告之类的，一不小心，用户还以为是网站被人挂马呢，想把不干净的东西存储到他的电脑。四、解决方案四、解决方案（一）关于自动缓存当前页面在Pro HTML5 Programming有这样一句话：这并不是 Bug，而是机制的需要。虽然说这样会让页面载入更快，但对于动态页面来说就是恶心了。至少应该有一种让用户选择是否缓存当前页的配置方案（或者说是一个开关）。不过，这是暂时不能解决的，毕竟这还只是一个 Draft，我们
10、要用，就应该找一个合适的方案。我的想法是，看看大家有没有更好的办法。结果，查了一下，无果。新的东西，几乎所有文章说的都只是我上面说的那个如何去写一个 manifest 文件，看来还是没办法偷懒。然后，便开始想：3g 中文网http:/一定不要缓存动态的页面，当前页一定不能引用 manifest 文件。能不能从其他页面先载入缓存？那么，如果有解决方案的话，解决方法应该是：不在当前页面引用 manifest。在用户打开页面之前，需要有一个页面来实现缓存机制。如果这样，那么为何不试一下 iframe 来引入一个拥有 manifest 的静态文件？但用 iframe 还能会缓存到文件？经过一翻测试，G
11、oogle Chrome 的调试工具给了答案：结果很不错，成功缓存。做法是这样的，新建一个 cache.html 文件来当做为当前页面的代理，内容如下：21. 22. 23. 24. 25. cache 26. 27. 28.hi sofish! 29. 30. 然后，在每个页面通过 iframe 来引用这个静态文件，以达到我们不缓存当面页面，只缓存我们希望缓存文件的目的。（二）关于 Firefox 弹出警告问题这个，浏览器默认的，浏览器厂商的目的是为用户的安全着想，我们暂时也改变不了。其实，也不会有太大的影响，我也没有好好去想。五、总结五、总结测试下来，其实跟缓存当前页面还是有差别的，毕竟像站外的链接，特别是 gravatar总要请求这么多图片，这点就又多了一点时间了。这现象主要出现在 Firefox 下，而 Webkit 而表示非常棒，速度几乎和缓存当前面一样，第二次打开的页面，都是瞬间响应的，效果非常不错。
