H5应用程序缓存浅谈及实际测试
Posted wm218
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5应用程序缓存浅谈及实际测试相关的知识，希望对你有一定的参考价值。
应用程序缓存能做什么？
- 可以在脱离网络的条件下离线访问。
- 减少读取服务器文件，减轻服务器的访问压力。
- 优化网站打开速度。
如何启用应用缓存？
第一步：给服务器添加新的MIME：扩展名：.appcache MIME类型：text/cache-manifest
第二步：创建appcache文件：
appcache文件可以看作缓存规则配置文件。appcache文件内可以定义需要缓存的文件列表、不缓存的文件列表、及文件不存在时时的替补资源。
appcache文件分成三部份：
- CACHE: #设置需要缓存的资源
- NETWORK: #设置不缓存的资源，该资源在离线时不可用
- FALLBACK: #规定如果无法建立因特网连接时，用指定的资源替换
appcache文件示例，比如将此文件保存到网站根目录路径：/manifest/article_lists.appcache
1 CACHE MANIFEST 2 # 井号用来注释 3 # CACHE表示需要缓存的文件 4 # CACHE不支持 * 号 5 CACHE: 6 about.html 7 video.html 8 css/css.css 9 js/common.js 10 # NETWORK 表示不缓存的文件，离线时是不可用的 11 NETWORK: 12 login.asp 13 # * 可以使用星号来指示所有其他资源/文件都需要因特网连接： 14 15 # FALLBACK 规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件： 16 FALLBACK: 17 /html5/ /404.html
appcache文件注意事项：
- 列表清单支持相对路径和绝对路径。
- 资源名称尽量不要使用汉字、空格等特殊文件。
第三步：主页面引入appcache文件，一旦打开该页面的同时会缓存appcache指定的文件。
比如主页面名为：article_lists.html，其引入方式如下：
1 <!DOCTYPE html> 2 <!-- appcache文件路径可以是相对，也可以是绝对路径--> 3 <html manifest="/manifest/article_lists.appcache">
注意细节：
- 执行文件(比如 article_lists.html)，虽然不在缓存列表内，但仍然会被缓存。
- 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
- 执行文件(比如 article_lists.html)内引用的资源，一定要使用完整的url，因为缓存匹配的是url，比如：
1 <!DOCTYPE HTML> 2 <html manifest="/learn/h5/h5.appcache"> 3 <head> 4 <title>H5 简明教程</title> 5 <!-- 这里一定要使用绝对URL --> 6 <link rel="stylesheet" type="text/css" href="//www.xxxx.net/learn/h5/css/css.css" />
以上是关于H5应用程序缓存浅谈及实际测试的主要内容，如果未能解决你的问题，请参考以下文章