最近在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. uvalive 3135 Argus

    https://vjudge.net/problem/UVALive-3135 题意: 有一个系统有多个指令,每个指令产生一个编号为qnum的时间,每个指令的触发间隔不相同,现在给出若干个指令,现在的 ...

  2. 初学者易上手的SSH-struts2 02Action获取表单数据-通配符

    在上一章中,我们已经搭建好了struts2的一个开发环境,那么这一章就来做一个简单的登录功能,以及介绍和使用struts2里面一个重要的东西-通配符. 第一步,在WebContent下面新建一个log ...

  3. DevOps之服务器

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <服务器(Server)> DevOps之服务器划分为三部分:系统.虚拟化.器件. ...

  4. Thrift总结(三)Thrift框架

    1.数据类型 基本类型: bool:布尔值,true 或 false,对应 Java 的 boolean byte:8 位有符号整数,对应 Java 的 byte i16:16 位有符号整数,对应 J ...

  5. Python正则表达计算器

    Python学习笔记(十二): 计算器 利用Python的正则表达式写的简易计算器 # author : Ryoma # time : 17:39 import re def add(string): ...

  6. 阻塞IO

    服务端 from socket import * server = socket(AF_INET,SOCK_STREAM) server.bind(('127.0.0.1',8080)) server ...

  7. vim中SnipMate 和 YouCompleteMe 插件触发键 tab 冲突

    花了好几天废了九牛二虎之力终于在win下把ycm插件装上了 然而在配置插件的时候发现snipmate插件与youcompleteme插件会发生tab键冲突 而ycm比较调,直接使snipmate插件完 ...

  8. Java IO(IO流)-1

    IO流 第一部分 (outputStream/InputStream Writer/Redaer) IO流对象中输入和输出是相辅相成的,输出什么,就可以输入什么. IO的命名方式为前半部分能干什么,后 ...

  9. js 中 new fn与new fn()的区别

    在有些代码中,看见了let fn = new Fn()和let fn = new Fn,刚开始有些人或许和我一样感到些许疑惑,但潜意识的也会想到,这两者说不定就是一样的.没错!!在没有参数的情况下这两 ...

  10. iOS开发中使用文字图标iconfont

    在iOS的开发中,各种图标的使用是不可避免的,如果把全部图标做成图片放在项目中,那么随着项目的逐渐庞大起来,图片所占的地方就会越来越大,安装包也就随之变大了,如果图标需要根据不同的场景改变使用不同的颜 ...