HTML5中缓存技术

简介:       通过指定HTML文件的缓存文件列表,就可以使客户端缓存列表中的文件到本地,这一特性可以减少不必要的通信访问,甚至可以开发离线使用的web应用程序。

      通过指定HTML文件的缓存文件列表,就可以使客户端缓存列表中的文件到本地,这一特性可以减少不必要的通信访问,甚至可以开发离线使用的web应用程序。下面是一个简单的例子。在HTML中指定缓存列表文件后缀为appcache,但其实并没有规定特定的拓展名,但为了清楚文件的用途,推荐使用.appcache

cache.html

<!DOCTYPE html>
<html manifest="sample.appcache">
<head>
    <meta charset="UTF-8">
    <title>test cache</title>
    <link rel="stylesheet" href="cache.css">
</head>
<body>
    <h1>Cache Sample</h1>
    <img src="t.png" alt="">
    <script src="cache.js"></script>
</body>
</html>
下面是缓存文件中的配置

sample.appcache

CACHE MANIFEST
# revision 1

CACHE:
./cache.js
./cache.css
./t.png

第一行必须是CACHE MANIFEST,以#开始的行为注释 ,从CACHE:  开始其后内容为自动缓存的内容

其他的配置项:    

     NETWORK: 后面内容为不缓存的内容   

     FALLBACK:   后面的内容为某一资源无法访问时的替代资源 

    如 FALLBACK:

         contents/             notfound.html                  #指定contents/下的资源无法访问的替代资源为  notfound.html

缓存的更新:

     实验使用Apache,在服务器端更新了.css文件的内容后,客户端浏览器并没有变化,因为客户端决定是否更新缓存是根据缓存列表文件是否有变化来更新的,缓存列表没有变化,即使文件内容发生变化,仍然不会重新缓存,在此时,可以通过对注释部分的版本号进行改变,来使得客户端重新更新。

    当客户端访问时,先根据缓存文件显示页面,然后重新更新缓存文件,所以需要在下一次重新访问页面时,页面内容才会发生变化,要精确控制缓存更新的时机,需要使用后面的Application API。

    

   applicationCache.onupdateready = function(){
        var ok = confirm('有新版本,是否更新?');
        if(ok)   location.reload();
    }

目录
相关文章
|
9天前
|
存储 缓存 前端开发
缓存技术在软件开发中的应用与优化策略
缓存技术在软件开发中的应用与优化策略
|
1月前
|
缓存 NoSQL Java
SpringBoot的三种缓存技术(Spring Cache、Layering Cache 框架、Alibaba JetCache 框架)
Spring Cache 是 Spring 提供的简易缓存方案,支持本地与 Redis 缓存。通过添加 `spring-boot-starter-data-redis` 和 `spring-boot-starter-cache` 依赖,并使用 `@EnableCaching` 开启缓存功能。JetCache 由阿里开源,功能更丰富,支持多级缓存和异步 API,通过引入 `jetcache-starter-redis` 依赖并配置 YAML 文件启用。Layering Cache 则提供分层缓存机制,需引入 `layering-cache-starter` 依赖并使用特定注解实现缓存逻辑。
171 1
SpringBoot的三种缓存技术(Spring Cache、Layering Cache 框架、Alibaba JetCache 框架)
|
17天前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
33 2
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
26 1
|
1月前
|
编解码 移动开发 前端开发
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
13 1
|
12天前
|
存储 缓存 NoSQL
【性能飙升的秘密】FastAPI应用如何借助缓存技术实现极速响应?揭秘高效Web开发的制胜法宝!
【8月更文挑战第31天】FastAPI是一个高性能Web框架,利用Starlette和Pydantic实现高效API构建。本文介绍如何通过缓存提升FastAPI应用性能,包括使用`starlette-cache[redis]`实现Redis缓存,以及缓存一致性和缓存策略的注意事项。通过具体示例展示了缓存的配置与应用,帮助开发者构建更高效的Web应用。
24 0
|
2月前
|
存储 缓存 算法
深入了解Memcached:缓存技术的利器
Memcached是一个开源的高性能分布式内存缓存系统,用于加速动态Web应用。它通过将数据库查询结果、API调用结果或其他数据缓存到内存中,减少对数据库的访问频率,从而提高应用的响应速度。本文详细介绍了Memcached的基本原理、架构、安装配置、使用方法、测试方法以及应用场景。通过Memcached,开发者可以有效提升Web应用的性能,减少数据库负载,改善用户体验。
36 5
|
2月前
|
存储 缓存 NoSQL
Java中的内存数据库与缓存技术
Java中的内存数据库与缓存技术
|
3月前
|
前端开发
技术经验分享:html生成印章
技术经验分享:html生成印章
48 1
|
3月前
|
存储 缓存 NoSQL
SpringBoot配置第三方专业缓存技术Redis
SpringBoot配置第三方专业缓存技术Redis
38 4