HTML5页面静态资源缓存利器Application Cache

来源：互联网发布：太极拳知乎编辑：程序博客网时间：2024/06/02 02:12

今天写了一个微信推广页，中间为了优化页面加载效果，一堆优化方法中其中之一就用到了Application Cache来对页面部分资源进行静态资源缓存。懒癌复发，今天就不介绍什么是Application Cache了,总之外事问谷歌，内事问度娘，房事问天涯就对了，下面直接上方法。

新建缓存文件

在项目文件夹下新建缓存文件ed.appcache,在这里缓存文件名和后缀名不作限制，理论上可以随意自定义，不过一般情况下我们会把后缀名写为.appcache

配置缓存列表

使用任意编辑器打开新建好的ed.appcache文件，配置缓存列表。示例：

CACHE MANIFEST#version1.2CACHE://需要进行缓存的文件img/01.jpg...NETWORK：//不需要进行缓存的文件...FALLBACK://缓存失败回调地址...

引入缓存文件

在HTML文件中引入缓存文件，方法是在页面html标签中添加下面代码：

<!DOCTYPE html><html manifest="ad.appcache">//manifest="ad.appcache"是我们需要添加的代码    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <meta name="Description" content="核心用户邀请"/>

#### 配置Mime-type

不同的服务器配置方法不同，这里我们就以 Apach服务器来举例说明：

打开Apache服务器项目根目录，进入conf文件夹下找到mime.types文件，使用记事本或者其他编辑器打开文件并在最下方添加下面代码：

text/cache-manifest         appcache

万事俱备，接下来我们就可以在浏览器控制台中查看效果了，这里我就不演示了…

查看更多文章请点击查看我的个人博客

0 0