最近在APP里新增一个论坛模块，为了快速地完成，决定将整个论坛模块做成WEB APP，WEB APP最致命的就是用户体验问题，页面跳转和过多的请求，大大影响了加载速度和用户体验，这时候我想到了HTML5的离线储存。

 
经过简单的了解之后，觉得这个可以有，但很快我又就发现，HTML5离线储存并不适于这次的项目。
 
原因如下：
 
1、  一旦页面指定了manifest，那么这个页面就一定被储存下来。如果有一个动态页面，不想缓存页面的内容，只想缓存页面所引用的css,js,img，但抱歉，这个没有办法做到。我想是因为浏览器与服务器既定的交互逻辑导致必须要这样设计，否则我就很不理解设计者了。
 
2、 page.html?id=1和 page.html?id=2被存储成了两个html不同的页面，想想当用户浏览了1000个不同的贴子的时候，浏览器就下载储存了1000个没有意义的页面。
 
3、第一次访问page.html?id=1，缓存成功后。再访问  page.html?id=2，不会去读缓存，这是因为由于参数变了，被认为地址不一样，不算是第二次请求，所以请求 page.html?id=2时依然会重新加载 manifest指定的文件 。
 
4、而我为了快速完成，进出层级时都做成了页面跳转，免不了传很多参数，而且每个贴子不一样的id，所以这种情况下离线缓存基本上没有意义，因为相当大部份请求都属于第一次访问。
 
5、再且，根据网上的资料，进行离线储存时会再次下载一次对应的数据，意思就是说，第一次访问时，使用了离线储存技术的页面加载时所消耗的时间比没有使用这个技术的页面要多，而且耗的流量更大。
 
因此， manifest极不适合含有动态参数页面跳转的情况下使用，最好是一个页面，然后完全的ajax请求。
 
 
 
 

一、应用场景

我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。

离线本地存储和传统的浏览器缓存有什么不同呢？

1、浏览器缓存主要包含两类：

a.缓存协商：Last-modified,Etag

浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件。否则服务器返回新内容。

b.彻底缓存：cache-control,Expires

通过Expires设置缓存失效时间，在失效之前不需要再跟服务器请求交互。

2、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；

3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；

4、离线存储可以动态通知用户进行更新。

二、如何实现

离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。

CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本，更新的时候只需修改版本号 CACHE:

    m.png

    test.js

    test.css

NETWORK:

    *

FALLBACK

    online.html offline.html

CACHE指定需要缓存的文件；NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件

要让manifest管理存储，还需要在html标签中定义manifest属性，如下：

<!DOCTYPE HTML> <html lang="en" manifest='test.manifest'> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

最后别忘了，这些应用需要服务器支持。

Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：

test/cache-manifest manifest

IIS服务器开启方式：

右键--HTTP---MIME映射下，单击文件类型---新建---扩展名输入manifest，类型中输入test/cache-manifest

 三、通过JS动态控制更新

applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所

有属性和事件方法。

applicationCache.onchecking = function(){ //检查manifest文件是否存在 }

applicationCache.ondownloading = function(){ //检查到有manifest或者manifest文件  //已更新就执行下载操作  //即使需要缓存的文件在请求时服务器已经返回过了 }

applicationCache.onnoupdate = function(){ //返回304表示没有更新，通知浏览器直接使用本地文件 }

applicationCache.onprogress = function(){ //下载的时候周期性的触发，可以通过它  //获取已经下载的文件个数 }

applicationCache.oncached = function(){ //下载结束后触发，表示缓存成功 }

application.onupdateready = function(){ //第二次载入，如果manifest被更新  //在下载结束时候触发  //不触发onchched  alert("本地缓存正在更新中。。。"); if(confirm("是否重新载入已更新文件")){

       applicationCache.swapCache();

       location.reload();

   }

}

applicationCache.onobsolete = function(){ //未找到文件，返回404或者401时候触发 }

applicationCache.onerror = function(){ //其他和离线存储有关的错误 }

 四、浏览器与服务器的交互

曾经有面试题是这样的："描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么？"。

1、服务端返回baidu页面资源，浏览器载入html

2、浏览器开始解析

3、发现link，发送请求载入css文件

4、浏览器渲染页面

5、发现图片，发送请求载入图片，并重新渲染

6、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender

对于支持离线存储的页面，浏览器和服务器的交互又是如何呢？

首次载入页面：

1-6 ： 同上

7：请求页面中需要缓存的页面和数据，就算在之前的步骤中已经请求过（这是个耗能的地方）

8：服务器返回所有请求文件，浏览器进行本地存储

再次载入页面：

1：发送请求

2：使用本地存储的离线文件

3：解析页面

4：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤5，否则进入步骤6（jaykon:这里是不是错了？304时会进入6才对）

5：进入首次载入页面的7-8（jaykon:这里注意，就算此次请求manifest文件更新了，也只是在页面宣染完成后重新下载里面路径的文件，这些新文件要在下一次访问时才会体现出来，比如再次刷新时。）

6：使用本地存储，不重新请求

 

转 html5离线储存,application cache,manifest使用体验的更多相关文章

  1. HTML5离线篇收藏--- cache manifest

    自从翻译了<解读 HTML5:建议.技巧和技术>,就一直没有时间去看 HTML5 相关的东西.上周一次偶然的工作间隙折腾了下 Cache Manifest .当时直接拿博客当测试环境,虽然 ...

  2. 离线应用Application Cache详解

    特点:     1.离线可访问            - 没有网络仍可访问整个应用     2.很小的服务器负载  - 缓存在本地,不需要到服务器请求     3.高速                 ...

  3. 离线缓存 application cache

    1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 例子:比如我们在手机或电脑上访问一个 ...

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

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

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

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

  6. HTML5学习总结-08 应用缓存(Application Cache)

    一 应用缓存(Application Cache) 1 应用缓存 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: ...

  7. 6，html5的离线储存怎么用

    6,html5的离线储存怎么用 客户端:(百科:或称为用户端,是指与服务器相对应,为客户提供本地服务的程序.除了一些只在本地运行的应用程序,一般安装在客户机上,需要与服务端配合运行) 在用户没有和因特 ...

  8. 神奇的HTML5离线存储（应用程序缓存）

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

  9. HTML5离线Web应用实战：五步创建成功

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

随机推荐

  1. 深入理解计算机系统chapter2

    ---恢复内容开始--- 整数表示: 反码和原码都会有正零和负零 有符号整数和无符号整数之间的转换 反之 扩展一个数字的位级表示 截断操作 无符号加法的益处 补码的加法 规格化的值:E=e-bias ...

  2. 实例讲解js正则表达式的使用

    前言:正则表达式(regular expression)反反复复学了多次,学了又忘,忘了又学,这次打算把基本的东西都整理出来,加强记忆,也方便下次查询. 学习正则表达式之前首先需要掌握记忆这些基本概念 ...

  3. Qt学习之路MainWindow学习过程中的知识点

    一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域:   二.QAction类 QAct ...

  4. 计算机基础--Java中int char byte的关系

    计算机基础--Java中int char byte的关系 重要:一个汉字占用2byte,Java中用char(0-65535 Unicode16)型字符来存字(直接打印输出的话是字而非数字),当然要用 ...

  5. bzoj4403（模板题）

    序列统计,将答案转化,然后就是Lucas的模板题,用费马小定理瞎搞. #include<cstdio> #include<iostream> #include<algor ...

  6. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  7. jvm中的垃圾回收器

    HotSpot JVM收集器 上面有7中收集器,分为两块,上面为新生代收集器,下面是老年代收集器.如果两个收集器之间存在连线,就说明它们可以搭配使用.Serial(串行GC)收集器 Serial收集器 ...

  8. 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HO问题

    原因:因为你的编译工具(eclipse/Myeclipse...)没有添加jdk.添加M2_HOME的环境变量. 解决: ①:window->Preferences->java->I ...

  9. mysql导出数据库和恢复数据库代码

    mysql导出数据库和备份数据库 用mysqldump 命令行 命令格式 mysqldump -u 用户名 -p  数据库名 > 数据库名.sql 范例: mysqldump -uroot -p ...

  10. CodeSmith(C#)简单示例及相关小知识

    // 本文将介绍CodeSmith与数据库进行交互生成相应的存储过程,本例使用的数据库为SQL Server 2000. // 在与数据库进行交互时,我们使用到了一个CodeSmith自带的组件Sch ...