HTML 5缓存机制：Cache Manifest配置实例

原创

axl234的博客 2022-04-06 14:59:48 博主文章分类：html5 ©著作权

©著作权归作者所有：来自51CTO博客作者axl234的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

Cache Manifest是HTML 5的一种缓存机制，文章作者直接用博客当测试环境，虽然[color=#444444 !important]应用起来非常简单，但效果却出奇的好。缓存后的速度，简直是惊人的快。像Yslow显示，打开一个缓存过的页面，只要0.729秒，比不缓存的差不多快了10倍。

　　一、Cache Manifest基础知识

　　作为一个Web开发相关的人员，都不会少听到、看到Cache这个词。是的，上面也已经说了，它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件，这里进行了简单的整理：

　　◆MIME TYPE：text/cache-manifest

　　◆需要由你创建的：NAME.manifest

　　◆作用：主要是配置需要缓存的文件

　　二、如何实现

　　实现起来倒是非常简单（当然，这也是有问题的，这个我们后面讲解决方案），实现步骤如下：

　　1.在服务器上添加MIME TYPE支

　　比如 Apache 中可在 .htaccess 中添加：

以下是引用片段：

AddType text/cache-manifest manifest

　　2.创建 NAME.manifest:

其中第一行的CACHE MANIFEST标识是一定要有的，而CACHE/NETWORK/FACKBACK 都是可选的。如果没有写标识，则默认缓存，Cache就不用说了，缓存；NETWORK指不想缓存的页面，比如登陆页等；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面，文件结构如下：

以下是引用片段：

CACHE MANIFEST

# VERSION 0.3

# 直接缓存的文件

CACHE: abc.html

images/sofish.png

js/main.js

css/layout.css

# 需要在时间在线的文件

NETWORK:

/wp-admin/

# 替代方案