html应用缓存,HTML5应用缓存
使用应用程序缓存,通过创建缓存清单文件,可以轻松地创建web应用程序的脱机版本.
什么是应用缓存?
HTML5 介绍应用程序缓存,这意味着Web应用程序缓存,并且在没有Internet连接的时候可访问。
应用程序缓存给出了应用程序的三个优点:
离线浏览 - 用户可以在离线时使用应用程序
速度 - 缓存资源加载速度更快
减少服务器的负载 - 浏览器只会从服务器下载更新/更改的资源
浏览器支持
表中的数字指定第一个完全支持应用程序缓存的浏览器版本.
API
应用程序缓存
4.0
10.0
3.5
4.0
11.5
HTML缓存清单的例子
下面的例子显示了一个缓存清单的HTML文档(离线浏览):
The content of the document......
缓存清单基础
要启用应用程序缓存,请在文档中包含清单属性:
...
当用户访问它时,将指定具有指定属性的每一页。如果未指定清单属性,则不会缓存该页(除非页直接在清单文件中指定).
清单文件的推荐文件扩展名为: ".appcache"
清单文件需要与 正确的媒体类型 一起使用, "text/cache-manifest". 必须配置在web服务器上.
清单文件
清单文件是一个简单的文本文件,它告诉浏览器要缓存什么(以及什么永远不要缓存)。.
清单文件有三个部分:
CACHE MANIFEST - 此标头下列出的文件它们首次下载将被缓存
NETWORK - 此标头下列出的文件需要与服务器连接,而且不会缓存
FALLBACK - 此标头下列出的文件如果页面不能访问的反馈页面
缓存清单
第一行,CACHE MANIFEST,是必需的
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的清单文件列出了三个资源: 一个CSS文件,GIF图像,和一个JavaScript文件.
当加载清单文件时,浏览器将从网站的根目录下载三个文件。.
然后,每当用户没有连接到Internet,资源仍然可用.
NETWORK
NETWORK 下一节指定文件“login.asp”永远不应该被缓存,并且不能脱机使用:
NETWORK:
login.asp
星号可以用来表示所有其他资源/文件需要互联网连接:
NETWORK:
*
FALLBACK
FALLBACK 下面指定的"offline.html"将服务于所有文件放在/HTML/目录,如果网络连接不能建立
FALLBACK:
/html/ /offline.html
注意: 第一个URI是资源, 第二行是fallback.
更新缓存
一旦应用程序被缓存,它将一直缓存,直到下面其中一种情况发生:
用户清除浏览器的缓存
清单文件被修改(见下面的提示)
应用程序缓存是以编程方式更新
实例 - 完整的缓存清单文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
提示: 以"#"打头的是注释行, 但也可以服务另一个目的.应用程序的缓存只在其清单文件更改时更新. 如果你编辑一个图像或JavaScript功能的变化,这些变化会不会重新缓存. 在注释行中更新日期和版本是使浏览器重新缓存文件的一种方法.
应用程序缓存注意事项
小心你缓存的东西.
一旦文件被缓存,浏览器将继续显示缓存的版本,即使你改变服务器上的文件。要确保浏览器更新缓存,您需要更改清单文件.
注意: 浏览器会缓存数据的不同尺寸的限制(一些浏览器站点一5MB限制).
html应用缓存,HTML5应用缓存相关推荐
- html开启页面离线缓存,HTML5 离线缓存
离线缓存 applicationCache 第一次加载后将数据缓存,如果没有清除缓存,下一次没有网络也能加载. 使用 1. 使用 manifest 属性,引入 .appcache 文件 每个指定了 m ...
- html5 数据缓存,HTML5: 本地缓存
HTML5 提供了两种在客户端存储数据的新对象: localStorage:没有时间限制的数据存储,在同一个浏览器中,只要没被手动清理,第二天.第二周或下一年之后,数据依然可用. sessionSto ...
- html5图片本地缓存,HTML5: 本地缓存
HTML5 提供了两种在client存储数据的新对象: localStorage:没有时间限制的数据存储,在同一个浏览器中,仅仅要没被手动清理,第二天.第二周或下一年之后,数据依旧可用. sessio ...
- html缓存在本地缓存,HTML5 本地缓存 window.localStorage
Conway's Game of Life: An Exercise in WPF, MVVM and C# This blog post was written for the Lo ...
- iOS html5使用缓存并及时更新方案总结
最近一段时间研究了一下H5在iOS移动端表现时使用缓存并可及时更新方案,总结如下: 一.使用Webview自带缓存机制 当我们使用webview加载html资源时的,本质上就是一个向服务器索取资源的h ...
- html5离线缓存使用
html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如: <!DOCTYPE html> <html manifest="test.ap ...
- html5设置不缓存页面,页面的缓存与不缓存设置
HTML的HTTP和谈头信息中把握着页面在几个处所的缓存信息,包含浏览器端,中心缓存办事器端(如:squid等),Web办事器端.本文评论辩论头信息 中带缓存把握信息的HTML页面(JSP/Servl ...
- ci mysql 缓存_CI框架缓存的实现原理
今天花了点时间看了下CI框架源码缓存的实现,写出来梳理下思路. 1:在CI框架中加载视图文件使用的是$this->load->view();方法,所以从load类库着手,在ci的syste ...
- 浏览器会不会缓存html,浏览器缓存机制(一)
浏览器缓存机制之一(经典缓存) 因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理.周末天气不好,懒得出去 ...
最新文章
- SFB 项目经验-13-为某上市企业仅安装Skype for Business 2016(图解)
- 生命科学领域颠覆性技术——基因测序
- python训练好的图片验证_利用keras加载训练好的.H5文件,并实现预测图片
- html无序标签前面的标点后移,为啥在网页里,标点符号跑到行首了呢
- WML元素及其语法格式一览表
- Linux centos 6.7 设置主机名
- akka与neety_Akka STM –与STM Ref和Agent一起打乒乓球
- [NLP] 相对位置编码(二) Relative Positional Encodings - Transformer-XL
- java写的MySQL数据库备份和恢复代码:
- android开发基本知识,Android应用开发基本知识点汇总
- 双非院校非科班的学弟,刚刚拿到了腾讯、网易、美团等大厂Offer
- golang - strings
- CCF201409-2 画图
- 加快FineReport报表设计的几个心得体会
- 用SVM分类模型处理iris数据集
- Android键盘映射
- emmagee测试汇总
- 软考网络工程师选择题题目(含答案)
- java 代码实现加锁_java内置锁实现锁住代码块方案(同一个对象或锁住整个类.class)...
- mac下用mysql执行sql文件完整
热门文章
- kettle连接不上es7_kettle8.2连接ElasticSearch7
- 1. 列维过程的混沌及可料表示(2)
- php图片传入及改名代码,WordPress添加媒体中文名图片上传改名(优化版)
- 1.8 循环神经网络的梯度消失-深度学习第五课《序列模型》-Stanford吴恩达教授
- 3.5 向量化实现的解释-深度学习-Stanford吴恩达教授
- 2.7 计算图-深度学习-Stanford吴恩达教授
- 2.1 二元分类-深度学习-Stanford吴恩达教授
- 准备入门IC的全局观念系列-下
- CodeChefSeries Sum (伯努利数+生成函数+FFT)
- Windows服务的安装,启动,停止和卸载