H5应用程序缓存浅谈及实际测试
应用程序缓存能做什么？
- 可以在脱离网络的条件下离线访问。
- 减少读取服务器文件，减轻服务器的访问压力。
- 优化网站打开速度。
如何启用应用缓存？
第一步：给服务器添加新的MIME：扩展名：.appcache MIME类型：text/cache-manifest
第二步：创建appcache文件：
appcache文件可以看作缓存规则配置文件。appcache文件内可以定义需要缓存的文件列表、不缓存的文件列表、及文件不存在时时的替补资源。
appcache文件分成三部份：
- CACHE: #设置需要缓存的资源
- NETWORK: #设置不缓存的资源，该资源在离线时不可用
- FALLBACK: #规定如果无法建立因特网连接时，用指定的资源替换
appcache文件示例，比如将此文件保存到网站根目录路径：/manifest/article_lists.appcache
CACHE MANIFEST
# 井号用来注释
# CACHE表示需要缓存的文件
# CACHE不支持 * 号
CACHE:
about.html
video.html
css/css.css
js/common.js
# NETWORK 表示不缓存的文件，离线时是不可用的
NETWORK:
login.asp
# * 可以使用星号来指示所有其他资源/文件都需要因特网连接： # FALLBACK 规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
appcache文件注意事项：
- 列表清单支持相对路径和绝对路径。
- 资源名称尽量不要使用汉字、空格等特殊文件。
第三步：主页面引入appcache文件，一旦打开该页面的同时会缓存appcache指定的文件。
比如主页面名为：article_lists.html，其引入方式如下：
<!DOCTYPE html>
<!-- appcache文件路径可以是相对，也可以是绝对路径-->
<html manifest="/manifest/article_lists.appcache">
注意细节：
- 执行文件(比如 article_lists.html)，虽然不在缓存列表内，但仍然会被缓存。
- 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
- 查看资源是否被缓存，可以在浏览器按F12键，在console内查看
- 文件引用缓存文件时，一定要区分大小写！
比如：缓存列表内缓存css/css.css 资源，全是小写状态。则执行时会将该文件下载到本机。
而离线html文件想要加载该css文件用了大写文件名时会显示出错，是因为离线匹配缓存文件是区分大小写。
也就是说： css.css 资源是被缓存了，但离线文件引用该缓存资源时未能正确的匹配大小写状态，导致无法正确加载该CSS样式。 <!DOCTYPE HTML>
<html manifest="/learn/h5/h5.appcache">
<head>
<title>H5 简明教程</title>
<!-- 由于appcache内缓存的文件名是小写的：css/css.css 而这里引用了大写的Css/css.css导致无法获取该资源的缓存 -->
<link rel="stylesheet" type="text/css" href="Css/css.css" />
1、 如果要缓存一个html页面，一定同时要缓存该文件所关联的所有资源列表，包括css、js、图片、文件等。
2、强制更新缓存，可以编辑appcache文件，比如修改注释。
H5应用程序缓存浅谈及实际测试的更多相关文章
- H5应用程序缓存 - Cache manifest
一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...
- H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
- AppCache 离线存储 应用程序缓存 API 及注意事项
使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- 神奇的HTML5离线存储（应用程序缓存）
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- Php output buffering缓存及程序缓存
在php中有时为了控制程序的输出显示顺序,提供了output buffering缓存(php自身缓存机制). 若Ob缓存开启,需要输出的就先存在ob缓存里,再到程序缓存里.若没有开启,则直接进入 ...
- HTML 5 学习之应用程序缓存
什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...
- 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- java三大特性（封装、继承、多态）
oop(面向对象程序设计)具有三大特性:封装.继承.多态 一.封装 封装就是讲类的信息隐藏在类的内部,不允许外部程序直接访问,而是通过该类的实现隐藏信息的操作和访问. 实现封装 1.需要修改属性的访问 ...
- VC MFC工具栏(CToolBar)控件（转）
工具栏 工具栏控件在控件面板里没有对应的选项(图标),但有一个工具栏控件类CToolBar,所以我们如果要创建一个工具栏控件并显示在窗口里的话,只能用代码来完成,事实上任何一种控件,都可以用代码创建, ...
- php编程零基础如何快速入门。门头沟编程
昨天遇到一个人,说知道thinktphp,不过几年前的事了. 我先跟他讲了下,xyhcms后台功能,各个版块,以及数据库都介绍了一下. 跟他说了一个功能现场实现,说了实现方法. 然后上机操作,发现他表 ...
- react系列（三）组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
- ES6系列文章 异步神器async-await
关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于.ES7的async-await带我们走向光明.今天就来学习一下 async-await. async-await和 ...
- JavaScript小练习3-用循环使三个DIV变色
题目 初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色. 分析 简单的onclick使用. button的居中可以在外套一个p元素,body中让p居中即可. 三个DIV块的居中,使用ma ...
- jQuery 属性操作 - addClass() 和 removeClass() 方法
实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("int ...
- 常用模块 - shutil模块
一.简介 shutil – Utility functions for copying and archiving files and directory trees.(用于复制和存档文件和目录树的实 ...
- centOS上的基础文件操作
文件及文件夹的基础操作: 1: 新建 (1)在当前目录新建一个文件夹 dir foldername (2) 新建文件: 当前目录 vi newFile.text ...
- Spring总结以及在面试中的一些问题
Spring总结以及在面试中的一些问题. 1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建Use ...