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. 查看资源是否被缓存,可以在浏览器按F12键,在console内查看

  4.  

  5. 文件引用缓存文件时,一定要区分大小写!
    比如:缓存列表内缓存css/css.css 资源,全是小写状态。则执行时会将该文件下载到本机。
    而离线html文件想要加载该css文件用了大写文件名时会显示出错,是因为离线匹配缓存文件是区分大小写。
    也就是说: css.css 资源是被缓存了,但离线文件引用该缓存资源时未能正确的匹配大小写状态,导致无法正确加载该CSS样式。
  6. 1 <!DOCTYPE HTML>
    2 <html manifest="/learn/h5/h5.appcache">
    3 <head>
    4 <title>H5 简明教程</title>
    5 <!-- 由于appcache内缓存的文件名是小写的:css/css.css  而这里引用了大写的Css/css.css导致无法获取该资源的缓存 -->
    6 <link rel="stylesheet" type="text/css" href="Css/css.css" />

1、 如果要缓存一个html页面,一定同时要缓存该文件所关联的所有资源列表,包括css、js、图片、文件等。

2、强制更新缓存,可以编辑appcache文件,比如修改注释。

 

posted @ 2018-06-27 23:04  1024记忆  阅读(940)  评论(0编辑  收藏  举报