HTML5缓存机制CacheManifest配置实例.doc

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.html / 章节内容modules/article/templates/fulltext.html / 全文阅读modules/article/templates/articleinfo.html / 书籍摘要页面themes/default/theme.html / 动态页面公用模板模板标签下面对 theme.html 模板中使用到的标签做简单的说明：在模板文件的html源代码中插入如下标签，即可在页面中显示出来相应内容。说明：V1.30以下版本，标签格式为，V1.30以上版本标签的格式为?XXX?，注意使用。 / 网页标题 / 网页字符集，对应后台系统定义中的“默认语言” / 网页关键字，对应后台系统定义中的“网站关键字” / 网站描述，对应后台系统定义中的“网站描述” / 作者 / 版权申明，对应后台系统定义中的“版权申明” / 系统CSS引用，由系统自动生成 / 头部插入代码，对应后台系统定义中的“头部插入代码” / 顶部通栏代码，对应后台系统定义中的“顶部通栏代码” / 注册用户登入详细资料 / GB2313编码的链接 / BIG5编码的链接 / JIEQI CMS图片文件夹路径 / JIEQI CMS首页链接,对应后台系统定义中的“网站地址” / BANNER代码，对应后台系统定义中的“BANNER代码” / 联系Email，对应后台系统定义中的“联系Email” / 系统菜单，如果后台系统定义中“是否使用系统菜单”一项为是，则使用由 configs/mainmenu.php 定义的菜单项目 / 网站名称，对应后台系统定义中的“网站名称” / 底部通栏代码，对应后台系统定义中的“底部部通栏代码” / 顶部区块标题 / 顶部区块内容 / 左边区块标题 / 左边区块内容 / 中上区块标题 / 中上区块内容 / 中左区块标题 / 中左区块内容 / 中右区块标题 / 中右区块内容 / 中中区块标题 / 中中区块内容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 中添加：1. AddTypetext/cache-manifestmanifest2.创建 NAME.manifest:其中第一行的CACHE MANIFEST标识是一定要有的，而CACHE/NETWORK/FACKBACK 都是可选的。如果没有写标识，则默认缓存，Cache就不用说了，缓存；NETWORK指不想缓存的页面，比如登陆页等；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面，文件结构如下：2. CACHEMANIFEST 3. 4. #VERSION0.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其实只是一行注释，但改变文件可以重新缓存，这样写上版本号，想更新的时候修改版本号来重新缓存，是一种比较推荐的方法，甚至可以是最佳实践。3.给标签加manifest属性20. 是的，就是如此简单，相信你花上30分钟也就了解了，而且能够快速的应用到工作中。三、Cache Manifest 存在的问题经过上面一整，速度明显快了许多，帮忙测试的人也小震惊了一下，只是，还是存在一些问题，看一下，然后我们尝试解决：1.自动缓存引用了manifest文件的页面即使在 NETWORK 中指定 *（所有的页面都）使用网络，还是不能解决它自动缓存当前页面。这使得这个页面在 manifest 没有变更的情况下，会一直以类静态存在。比如，你后台更新了一篇文章，这个动态的首页，还是像第一次缓存的时候一样，没有变。这对于静态页面还好，但应用在一个动态系统就很麻烦了，因为你的内容是时时要更新的。2.Firefox弹出提示信息可能是习惯了弹窗警告之类的，一不小心，用户还以为是网站被人挂马呢，想把不干净的东西存储到他的电脑。四、解决方案（一）关于自动缓存当前页面在Pro HTML5 Programming有这样一句话：这并不是Bug，而是机制的需要。虽然说这样会让页面载入更快，但对于动态页面来说就是恶心了。至少应该有一种让用户选择是否缓存当前页的配置方案（或者说是一个开关）。不过，这是暂时不能解决的，毕竟这还只是一个Draft，我们要用，就应该找一个合适的方案。我的想法是，看看大家有没有更好的办法。结果，查了一下，无果。新的东西，几乎所有文章说的都只是我上面说的那个如何去写一个manifest文件，看来还是没办法偷懒。然后，便开始想：3g中文网一定不要缓存动态的页面，当前页一定不能引用 manifest文件。能不能从其他页面先载入缓存？那么，如果有解决方案的话，解决方法应该是：不在当前页面引用manifest。在用户打开页面之前，需要有一个页面来实现缓存机制。如果这样，那么为何不试一下iframe来引入一个拥有manifest的静态文件？但用 iframe 还能会缓存到文件？经过一翻测试，Google Chrome的调试工具给了答案：结果很不错，成功缓存。做法是这样的，新建一个cache.html文件来当做为当前页面的代理，内容如下：21. 22. 23. 24. 25. cache26. 27. 28. hisofish! 29. 30. 然后，在每个页面通过iframe来引用这个静态文件，以达到我们不缓存当面页面，只缓存我们希望缓存文件的目的。（二）关于 Firefox 弹出警告问题这个，浏览器默认的，浏览器厂商的目的是为用户的安全着想，我们暂