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

时间：2018-06-27 23:54:06 阅读：204 评论：0 收藏：0 [点我收藏+]

标签：ack man 数据注释绝对路径应用程序 lists 指定 ref

应用程序缓存能做什么？

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

如何启用应用缓存？

第一步：给服务器添加新的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应用程序缓存浅谈及实际测试

标签：ack man 数据注释绝对路径应用程序 lists 指定 ref

原文地址：https://www.cnblogs.com/wm218/p/9236484.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行