H5应用程序缓存浅谈及实际测试

Posted wm218

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5应用程序缓存浅谈及实际测试相关的知识,希望对你有一定的参考价值。

应用程序缓存能做什么?

  1. 可以在脱离网络的条件下离线访问。
  2. 减少读取服务器文件,减轻服务器的访问压力。
  3. 优化网站打开速度。

如何启用应用缓存?

第一步:给服务器添加新的MIME:扩展名:.appcache  MIME类型:text/cache-manifest

第二步:创建appcache文件:

appcache文件可以看作缓存规则配置文件。appcache文件内可以定义需要缓存的文件列表、不缓存的文件列表、及文件不存在时时的替补资源。

appcache文件分成三部份:

  1. CACHE:          #设置需要缓存的资源
  2. NETWORK:    #设置不缓存的资源,该资源在离线时不可用
  3. 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文件注意事项:

  1. 列表清单支持相对路径和绝对路径。
  2. 资源名称尽量不要使用汉字、空格等特殊文件。

第三步:主页面引入appcache文件,一旦打开该页面的同时会缓存appcache指定的文件。

比如主页面名为:article_lists.html,其引入方式如下:

1 <!DOCTYPE html>
2 <!-- appcache文件路径可以是相对,也可以是绝对路径-->
3 <html manifest="/manifest/article_lists.appcache"> 

注意细节:

  1. 执行文件(比如 article_lists.html),虽然不在缓存列表内,但仍然会被缓存。
  2. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
  3. 执行文件(比如 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应用程序缓存浅谈及实际测试的主要内容,如果未能解决你的问题,请参考以下文章

Hibernate缓存机制浅谈

H5基础标签浅谈

一招解决微信小程序中的H5缓存问题

h5-应用级缓存

运行/调试你的PHP代码

H5 缓存机制解析