最近在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. TCP/IP（四）网络层

    前言 前面给大家介绍了计算机网络的基本概述,物理层和数据链路层.这一篇给大家介绍面试中经常会被问到的网络层.在介绍之前我们回顾一下之前学习的知识! CP/IP协议栈:物理层.链路层.网络层.传输层.应 ...

  2. ptyhon 编程基础之函数篇（二）-----返回函数，自定义排序函数，闭包,匿名函数

    一.自定义排序函数 在Python中可以使用内置函数sorted(list)进行排序: 结果如下图所示: 但sorted也是一个高阶函数,可以接受两个参数来实现自定义排序函数,第一个参数为要排序的集合 ...

  3. Linux入门之常用命令（7）压缩

    compress filename 压缩   -d解压缩  *.Z bzip -d解压缩 -z压缩 *.bz2 bzcat filename .bz2 读取压缩文件内容 gzip -d解压缩  -#压 ...

  4. 【POJ】1704 Georgia and Bob（Staircase Nim）

    Description Georgia and Bob decide to play a self-invented game. They draw a row of grids on paper, ...

  5. 无向图广度优先遍历及其matlab实现

    广度优先遍历(breadth-first traverse,bfts),称作广度优先搜索(breath first search)是连通图的一种遍历策略.之所以称作广度优先遍历是因为他的思想是从一个顶 ...

  6. VBA /VB/VB中合成分散数据方法

    公司用于项目号的合成,怕忘记,特此放上这里.若能帮助其它道友,善莫大焉. 比如:001,004,006,007,008,009,010 结果可以输出:001,004,006-010 逻辑:1.获得数据 ...

  7. zoj1797 Least Common Multiple 最小公倍数

    Least Common Multiple Time Limit: 2 Seconds      Memory Limit: 65536 KB The least common multiple (L ...

  8. cocos2dx - 在MFC中使用cocos2dx

    本节主要讲一下如何在MFC窗口中使用cocos2dx 在做比较复杂的游戏,有时需要通过一些工具来编辑生成关卡或者特效,技能等的配置文件.为了方便配置,需要可以通过修改参数直观得到显示的效果.这就需要将 ...

  9. 谦先生的程序员日志之我的hadoop大数据生涯一

    从一个初级程序员到高级程序员的经历 你好!我是谦先生,我是茫茫程序猿中的一猿,平凡又执着. 刚入行的时候说实话,啥都不懂,就懂点皮毛的java,各种被虐狗的感觉.又写js又写css又写后台...慢慢被 ...

  10. 张高兴的 Windows 10 IoT 开发笔记：使用 ULN2003A 控制步进电机

    GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/ULN2003A