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

最新推荐文章于 2025-06-05 06:51:06 发布

Afeyer

最新推荐文章于 2025-06-05 06:51:06 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html5 WebApp 文章标签： Web 缓存 Cache

本文链接：https://blog.youkuaiyun.com/zhu1500527791/article/details/53261552

Html5 同时被 2 个专栏收录

3 篇文章

订阅专栏

WebApp

3 篇文章

订阅专栏

本文介绍如何使用ApplicationCache优化网页加载速度。通过创建缓存文件并配置缓存清单，实现资源缓存；同时介绍了如何在HTML文件中引入缓存文件及服务器配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

新建缓存文件

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

配置缓存列表

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

CACHE MANIFEST

#version1.2

CACHE://需要进行缓存的文件

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="核心用户邀请"/>