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();
    }

目录
相关文章
|
7天前
|
存储 缓存 数据库
缓存技术有哪些应用场景呢
【10月更文挑战第19天】缓存技术有哪些应用场景呢
|
6天前
|
存储 缓存 运维
缓存技术有哪些优缺点呢
【10月更文挑战第19天】缓存技术有哪些优缺点呢
|
1月前
|
缓存 移动开发 前端开发
HTML5 应用程序缓存详解
HTML5 应用程序缓存(Application Cache)通过缓存 HTML、JavaScript、CSS 和图像等资源,使 Web 应用能在离线状态下运行。它利用 Manifest 文件(`.appcache`)定义缓存资源列表,浏览器会在加载页面时下载并缓存这些资源。此外,应用程序缓存还提供了事件处理机制,允许开发者监控缓存状态并进行手动管理。尽管这一技术已被视为过时,建议使用 Service Workers 和 Cache API 等现代替代方案来实现更强大的离线功能和缓存控制。
|
2月前
|
存储 缓存 NoSQL
解决Redis缓存击穿问题的技术方法
解决Redis缓存击穿问题的技术方法
61 2
|
15天前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
15 0
|
2月前
|
存储 缓存 Java
在Spring Boot中使用缓存的技术解析
通过利用Spring Boot中的缓存支持,开发者可以轻松地实现高效和可扩展的缓存策略,进而提升应用的性能和用户体验。Spring Boot的声明式缓存抽象和对多种缓存技术的支持,使得集成和使用缓存变得前所未有的简单。无论是在开发新应用还是优化现有应用,合理地使用缓存都是提高性能的有效手段。
31 1
|
2月前
|
存储 缓存 前端开发
缓存技术在软件开发中的应用与优化策略
缓存技术在软件开发中的应用与优化策略
|
3月前
|
缓存 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` 依赖并使用特定注解实现缓存逻辑。
730 1
SpringBoot的三种缓存技术(Spring Cache、Layering Cache 框架、Alibaba JetCache 框架)
|
3月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
52 2
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
34 1