html5应用程序缓存
缓存概念:
------页面缓存: html、JS、CSS等,这些缓存资源是由于浏览器的行为而产生;
------数据缓存
----------AppCache: Cache Manifest 操作; 需要服务器 与 客户端 相互配合; 所有的缓存数据都由开发者直接完全地掌控。
----------DOM Storage(Web Storage): local storage; session storage; 存储一些简单的用key/value对即可解决的数据
Manifest 应用程序缓存,带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
简单的说就是通过配置文件告诉浏览器缓存什么,不缓存什么,断网情况下怎么办。
Manifest 文件的简单原理:Manifest 文件首次作用后,如果内容没有变化,缓存内容不会变,但是哪怕一丁点变化(哪怕是备注),会重新缓存信息
浏览器支持
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。
HTML5 Cache Manifest 实例
实例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Cache Manifest 基础
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的:
NETWORK:
login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接:
NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:
FALLBACK:
/html5/ /404.html
注释:第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
用户清空浏览器缓存
manifest 文件被修改(参阅下面的提示)
由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
html5应用程序缓存的更多相关文章
- HTML5应用程序缓存实现离线Web网页或应用
HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...
- HTML5: HTML5 应用程序缓存
ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...
- cookie,sessionStorage,loclaStorage,HTML5应用程序缓存
cookie Cookie 是一些数据,由服务器生成,发送给浏览器,一旦用户从该网站或服务器退出,Cookie 就存储在用户本地的硬盘上,下一次请求同一网站时会把该cookie发送给服务器.Cooki ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- 【HTML5】浅析HTML5应用程序缓存(ApplicationCache)
一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的 ...
- HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- html5—— 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这 ...
- HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译
习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...
- HTML5 应用程序缓存
使用HTML5,通过创建 cache manifest 文件,可以轻松创建web应用的离线缓存. 什么事应用程序缓存? HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并在没有因特 ...
随机推荐
- kafka安装使用和遇到的坑
下载安装 参考:https://segmentfault.com/a/1190000012730949 https://kafka.apache.org/quickstart 关闭服务 关闭zoo ...
- SpringBoot的RestController vs @ResponseBody + @Controller
@Controller和@RestController的区别?官方文档:@RestController is a stereotype annotation that combines @Respon ...
- spring5——Aop的实现原理(动态代理)
spring框架的核心之一AOP,面向切面编程是一种编程思想.我对于面向切面编程的理解是:可以让我们动态的控制程序的执行流程及执行结果.spring框架对AOP的实现是为了使业务逻辑之间实现分离,分离 ...
- 在Debian或Ubuntu中安装和使用'搜狗输入法for linux'
下载搜狗输入法 for linux点击 搜狗输入法 for linux 以下载安装包到本地 安装搜狗输入法 for linuxA.准备工作: (1) 连接网络.挂载系统安装盘 此安装过程需要网络连接, ...
- 将Tomcat添加进服务启动
tomcat有解压版和安装版2种版本,安装版已经做好了将tomcat添加进服务的操作,而解压版需要我们自己来实现,应用场景主要是在服务器端需要在服务器启动时就启动tomcat. 1.首先需要配置好jd ...
- Python selenium 三种等待方式详解
1. 强制等待第一种也是最简单粗暴的一种办法就是强制等待sleep(xx),强制让闪电侠等xx时间,不管凹凸曼能不能跟上速度,还是已经提前到了,都必须等xx时间.看代码: # -*- coding: ...
- mvc4.0 @Styles.Render(转)
1.@Styles.Render 在页面上可以用@Styles.Render("~/Content/css") 来加载css 首先要在App_Start 里面BundleConfi ...
- hermite矩阵
在读线代书.因为之前并没有上过线性代数的课.所以决定把基础打牢牢. 读书的时候当然会出现不懂的概念和术语或者定理什么的.所以在这记录一下啦--- hermit矩阵要理解它好像先要知道什么是共轭(con ...
- window10下安装linux虚拟机
一.准备工具 虚拟机.镜像.putty 1.安装虚拟机 VMware Workstation Pro 安装成功之后需要输入密钥,请点击以下链接 http://www.360doc.com/conten ...
- jQuery中的for循环var与let的区别
今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.aj ...