自从翻译了《解读 HTML5:建议、技巧和技术》,就一直没有时间去看 HTML5 相关的东西。上周一次偶然的工作间隙折腾了下 Cache Manifest 。当时直接拿博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像 Yslow 显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍,当时就震惊了,想深入了解一下。

一、什么是 Cache Manifest

话说,作为一个 web 开发相关的人员,都不会少听到、看到 cache 这个词。是的,上面也已经说了,它是一种缓存的机制。它可以通过一个 .manifest 文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个 .manifest 文件,具体的可以 Google 一下,而简单的我帮你整理一下现在可能会希望了解的东西:

  • 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 弹出提示信息

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

四、解决方案

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

我查了 w3c 的文档,也看了 《Pro HTML5 Programming》的第10章(Creating HTML5 Offline Web Applications),最后还是 div into HTML5 的那句话,原意大概是:这并不是 Bug,而是机制的需要。

真是杯具,反正我能理解到的是,这是一种强加的功能。虽然说这样会让页面载入更快,但对于动态页面来说就是恶心了。至少应该有一种让用户选择是否缓存当前页的配置方案(或者说是一个开关)。不过,这是暂时不能解决的,毕竟这还只是一个 Draft,我们要用,就应用找一个合适的方案。

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

  1. 一定不要缓存动态的页面,当前页一定不能引用 manifest文件
  2. 能不能从其他页面先载入缓存?

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

  1. 不在当前页面引用 manifest
  2. 在用户打开页面之前,需要有一个页面来实现缓存机制

如果这样,那么为何不试一下 iframe 来引入一个拥有 manifest 的静态文件?但用 iframe 还能会缓存到文件?经过一翻测试,Google Chrome 的调试工具给了答案:

太给力啦!!竟然成功缓存。做法是这样的,新建一个 cache.html 文件来当做为当前页面的代理,内容如下:

<!DOCTYPE html>
<html manifest="http://www.sofish.de/sofished.manifest">
<head>
<meta charset=utf-8 />
<title>cache</title>
</head>
<body>
hi sofish!
</body>
</html>

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

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

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

五、总结

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

对于实践的 Demo,本来可以提供一份,不过,瞄了一下,突然发现自己写得太专心了,已凌晨 2:49 了,明天还要上班。所以,打开你的调试工具,把本博当 Demo 看吧,这是最直接的应用了。

好吧,大概就这样,能为用户省多少就是多少,这是一个前端希望做到的,也是能做到的。这也算是有了 fallback 方案。期待你,看到最后的你,还有更好的方法。也期待 HTML5 的发展,期待这些给力的新技术。

HTML5离线篇收藏--- cache manifest的更多相关文章

  1. 转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  2. 使用HTML5开发离线应用 - cache manifest

    HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...

  3. HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  4. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  5. HTML5离线Web应用实战:五步创建成功

    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...

  6. 神奇的HTML5离线存储(应用程序缓存)

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  7. HTML5 离线功能介绍

    HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...

  8. HTML5离线缓存(Application Cache)

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  9. HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

    一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为  lzwme.manifest,内容配置参考如下: 01 CACHE ...

随机推荐

  1. 简单的java socket 示例

    一.搭建服务器端 a).创建ServerSocket对象绑定监听端口. b).通过accept()方法监听客户端的请求. c).建立连接后,通过输入输出流读取客户端发送的请求信息. d).通过输出流向 ...

  2. jq封装的tab切换

    function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...

  3. 15.linux 中无法输入指令

    怎么可以回到倒数第五行的输入状态啊……

  4. Spring urlMapping

    背景 某url性能测试表明,qps单机最高只有4000多,虽然靠堆机器可以解决问题,但是显然不是什么优雅的方案. 试着把controller里的所有的逻辑都屏蔽,只是简单的返回hello world, ...

  5. VS有效序列号

    VS2005 : KYTYH-TQKW6-VWPBQ-DKC8F-HWC4J VS2008 : PYHYP-WXB3B-B2CCM-V9DX9-VDY8T VS2010 : YCFHQ-9DWCY-D ...

  6. Hadoop HDFS编程 API入门系列之RPC版本1(八)

    不多说,直接上代码. 代码 package zhouls.bigdata.myWholeHadoop.RPC.rpc1; import java.io.IOException;import java. ...

  7. centos6升级python2.7

    #下载python #wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.bz2 #安装支持https yum install opens ...

  8. iOS MVC, MVVM

    在iOS app里,如果用传统的MVC模式,Model层就是数据,View层就是Storyboard,nib文件或者构建UI的代码,Controller层就是ViewController,负责协调Mo ...

  9. Oracle 的递归查询将层级变成字符串

    select A.PARENT_GROUP_ID, A.GROUP_ID,sys_connect_by_path(A.GROUP_ID,'/') || '/' path from dam_dataen ...

  10. 利用nginx来屏蔽指定的user_agent的访问以及根据user_agent做跳转

    对于做国内站的我来说,我不希望国外蜘蛛来访问我的网站,特别是个别垃圾蜘蛛,它们访问特别频繁.这些垃圾流量多了之后,严重浪费服务器的带宽和资源.通过判断user agent,在nginx中禁用这些蜘蛛可 ...