最近在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. Thread.Join 和 Task.Wait 方法

    这两个方法 可以说是类似的功能,都是对当前任务进行等待阻塞,执行完毕后再进行后续处理 talk is cheap, show you code,下面一个是异步执行,一个是加了阻塞,可以对比不同执行结果 ...

  2. SpringMVC——使用RequestDispatcher.include()和HttpServletResponseWrapper动态获取jsp输出内容

    介绍本篇内容前,先抛出我遇到的问题或者说是需求!(精读阅读本篇可能花费您15分钟,略读需5分钟左右) 一:需求说明 有一个Controller有两个方法 第一个方法通过指定的路径和参数去渲染jsp内容 ...

  3. HiWord()

    #define HIWORD(I) ( ( WORD ) ( ( ( DWORD )( I ) >> 16) & 0xFFFF ) ). 这个宏传回一个WORD值(16位的无符号整 ...

  4. 用es6的class关键字定义一个类

    es6新增class关键字使用方法详解. 通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法 ...

  5. Android打包版本号设置

    之前没有设置过打包的命名,每次打包都是默认的"app-realease.apk",之后手动修改名字来显示出它是一个新版本. 晚上学习了如何配置打包名称,很简单,修改build.gr ...

  6. 【笔记】如何查看HTTP请求头&&【实验吧】天下武功唯快不破

    打开Chrome浏览器,点击右上角“三”按钮. 点击工具-----再点击开发者工具   找到Network选项框.以百度经验页面为例,点击任务选框来查看网络请求流   在Network框内会有所有的请 ...

  7. mySQL、mariaDB、noSQL、SQL server、redis之间是什么关系？

    1.首先,从数据库类型上分类,mySQL.mariaDB.SQL server这3种属于关系型数据库. noSQL属于非关系型数据库,被视为数据库革命者. redis成为内存缓存数据库,而前面的两种类 ...

  8. 配置eNSP和本地电脑上的网卡相连，从而直接从本地电脑连接设备

  9. 第九章 MySQL中LIMIT和NOT IN案例

    第九章 MySQL中LIMIT和NOT IN案例 一.案例的项目 1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生 ...

  10. Scala 运算符和集合转换操作示例

    Scala是数据挖掘算法领域最有力的编程语言之一,语言本身是面向函数,这也符合了数据挖掘算法的常用场景:在原始数据集上应用一系列的变换,语言本身也对集合操作提供了众多强大的函数,本文将以List类型为 ...