一真的小站

鳶飛魚躍,無處不是化境。

0%

十一、缓存

十一、缓存

介绍

1.概念:

使用HTML5,通过创建 cache manifest 文件,可以轻松地创建 web应用的离线版本

2.优势:

a)可配置需要缓存的资源

b)网络无连接应用仍可用

c)本地读取缓存资源,提升访问速度,增强用户体验

d)减少请求,缓解服务器负担

3.Cache Manifest 基础:

a)如需启用应用程序缓存,请在文档的标签中包含manifest属性:

1
2
3
<!DOCTYPE HTML>
<html manifest="demo.appcache">
</html>

b)每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性,则页面不会被缓存(除非在manifest文件中直接指定了该页面)。

c)manifest 文件的建议的文件扩展名是:”.appcache”。

d)注意,manifest 文件需要配置正确的MIME-type,即”text/cache-
manifest”。必须在web 服务器上进行配置

4.Manifest文件:

a)概念:manifest文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)

b)manifest 文件可分为三个部分

CACHE MANIFEST-开始
CACHE在此标题下列出的文件将在首次下载后进行缓存
NETWORK-在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

写法

主体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<!-- manifest="应用程序缓存清单文件的路径建议文件的扩展名是appcache,这个文件的本质就是一个文本文件 -->
<htmllang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
display: block;
}
</style>
</head>
<body>
<img src="../images/11.jpg" alt="">
<img src="../images/12.jpg" alt="">
<img src="../images/13.jpg" alt="">
<img src="../images/14.jpg" alt="">
</body>
</html>

Manifest文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
#后面写注释
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/11.jpg
../images/12-jpgl
# *:代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
./images/13.jpg
#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
./images/14.jpg../images/banner_1.jpg
# /:代表所有文件