H5离线缓存技术Application Cache

1、离线缓存技术:是浏览器本身的一种机制

HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本地,在没有网络的情况下可以访问到已缓存的对应的站点页面,这些文件包括html、js、css、img等文件;其实在有网络的时候,浏览器也会优先使用已离线存储的文件。而且做好相应资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。


2、离线本地存储和传统的浏览器缓存的区别

  浏览器缓存主要包含两类:

  • Last-modified,Etag

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

  

  • 彻底缓存:cache-control,Expires

通过Expires设置缓存失效时间,失效之前不再跟服务器请求交互

  • 离线存储为整个web提供服务,浏览器缓存只缓存单个页面
  • 离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定
  • 离线存储可以动态通知用户进行更新

3、Application Cache带来的三大优势:

  a、离线浏览

  b、提升页面载入速度

  c、降低服务器的压力


4、Application Cache包括:

  a、Manifest文件:是一个简单的文本文件,扩展名任意,定义需要缓存的文件和资源,当第一次打开时,浏览器会自动缓存相应的资源

  b、Application Cache文件

  c、特点:Manifest文件必须有变化才更新,一次必须更新manifest文件中的所有文件下次才能生效

  d、Manifest的特点:

     1>离线浏览:当网络断开时,可以继续访问你的页面

     2>访问速度快:将文件缓存到本地,不需要每次都从网络上请求

       3>稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障继续访问本地缓存


5、如何实现:

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

CACHE MANIFEST//必须以这个开头,在第一行
version 1.0 //最好定义版本,更新的时候只需修改版本号
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.html

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

  c、最后别忘了,这些应用需要服务器支持

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

test/cache-manifest manifest

  d、IIS服务器开启方式:

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

  e、下面的例子中,如果无法建立因特网连接,则用 “404.html” 替代 /html5/ 目录中的所有文件。

  FALLBACK:
  /html5/ /404.html

  下面的例子中,当任何页面无法访问时跳转到 “404.html”页。

  FALLBACK:
  *.html /404.html

  f、添加 manifest  属性的页面会自动被浏览器缓存,不需要再CACHE节点中再次添加。

  


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

一般对于地址栏输入一个网址后发生:

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

  2)、浏览器开始解析

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

  4)、浏览器渲染页面

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

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

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

首次载入页面:

  1)-6) : 同上

  7):请求页面中需要缓存的页面和数据,就算在之前的步骤中已经请求过(这是个耗能的地方)

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

再次载入页面:

  1):发送请求

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

  3):解析页面

  4):请求服务端的manifest文件,判断是否有改变,返回304则表示没有改变进入步骤6,否则进入步骤5

  5):进入首次载入页面的7-8

  6):使用本地存储,不重新请求


7、如何更新缓存

如下三种方式,可以更新缓存:

  • 更新manifest文件
  • 通过javascript操作
  • 清除浏览器缓存

如何通过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(){
//其他和离线存储有关的错误
}

H5离线缓存技术Application Cache的更多相关文章

  1. HTML5离线缓存(Application Cache)

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

  2. H5离线缓存技术

      HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...

  3. h5离线缓存

    离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...

  4. HTML5-应用程序缓存(Application Cache)

    一.什么是应用程序缓存? HTML5 引入了应用程序缓存(Application Cache),这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 二.优势 离线浏览 - 用户可在应用 ...

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

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

  6. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  7. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  8. HTML5 manifest离线缓存技术

    干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...

  9. HTML5新特性之离线缓存技术

    一.离线缓存的起因. HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代, 设备终端位置不再固定,依赖无线信号,网络的可靠 ...

随机推荐

  1. Integer的最大值

    来自:https://blog.csdn.net/qq_33611068/article/details/77369050 有这样一道题: 编程测试,遍历 0 到 int所能表示最大的正数,将消耗的时 ...

  2. [原][osg]Geometry详解

    //geometry成员变量 PrimitiveSetList _primitives; osg::ref_ptr<Array> _vertexArray; //顶点 osg::ref_p ...

  3. Android SDK开发

    目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace F ...

  4. Java离线人脸识别SDK 支持arcface 2.0 最新版

    虹软人脸识别SDK之Java版,支持SDK 1.1+,以及当前最新版本2.0,滴滴,抓紧上车! JDK SDK Win release license status 前言 由于业务需求,最近跟人脸识别 ...

  5. 牛客OI周赛4-提高组 B 最后的晚餐(dinner)

    最后的晚餐(dinner) 思路: 容斥 求 ∑(-1)^i * C(n, i) * 2^i * (2n-i-1)! 这道题卡常数 #pragma GCC optimize(2) #pragma GC ...

  6. Codeforces Gym - 101102B - The Little Match Girl

    B. The Little Match Girl time limit per test 1 second memory limit per test 256 megabytes input stan ...

  7. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  8. 日常英语---十四、Dolce & Gabbana cancels China show amid 'racist' ad controversy(adj.温柔的,prep.在其中)

    日常英语---十四.Dolce & Gabbana cancels China show amid 'racist' ad controversy(adj.温柔的,prep.在其中) 一.总结 ...

  9. spring cloud: zuul(五): prefix访问前缀, ignoredServices粗粒度访问, yml不起作用

    路由的前缀 - 问题 zuul.prefix: 我们可以指定一个全局的前缀 strip-prefix: 是否将这个代理前缀去掉 zuul: prefix: /ecom 我的eureka:http:// ...

  10. 雷林鹏分享:查看 XML 文件

    查看 XML 文件 在所有主流的浏览器中,均能够查看原始的 XML 文件. 不要指望 XML 文件会直接显示为 HTML 页面. 查看 XML 文件 - Tove Jani Reminder Don' ...