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

目录
相关文章
|
4天前
|
存储 缓存 负载均衡
从零到一:分布式缓存技术初探
分布式缓存通过将数据存储在多个节点上,利用负载均衡算法提高访问速度、降低数据库负载并增强系统可用性。常见产品有Redis、Memcached等。其优势包括性能扩展、高可用性、负载均衡和容错性,适用于页面缓存、应用对象缓存、状态缓存、并行处理、事件处理及极限事务处理等多种场景。
17 1
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
36 6
|
1月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
38 3
|
1月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
34 2
|
2月前
|
存储 缓存 数据库
缓存技术有哪些应用场景呢
【10月更文挑战第19天】缓存技术有哪些应用场景呢
|
2月前
|
存储 缓存 运维
缓存技术有哪些优缺点呢
【10月更文挑战第19天】缓存技术有哪些优缺点呢
|
2月前
|
缓存 移动开发 前端开发
HTML5 应用程序缓存详解
HTML5 应用程序缓存(Application Cache)通过缓存 HTML、JavaScript、CSS 和图像等资源,使 Web 应用能在离线状态下运行。它利用 Manifest 文件(`.appcache`)定义缓存资源列表,浏览器会在加载页面时下载并缓存这些资源。此外,应用程序缓存还提供了事件处理机制,允许开发者监控缓存状态并进行手动管理。尽管这一技术已被视为过时,建议使用 Service Workers 和 Cache API 等现代替代方案来实现更强大的离线功能和缓存控制。
|
3月前
|
存储 缓存 NoSQL
解决Redis缓存击穿问题的技术方法
解决Redis缓存击穿问题的技术方法
82 2
|
3月前
|
存储 缓存 Java
在Spring Boot中使用缓存的技术解析
通过利用Spring Boot中的缓存支持,开发者可以轻松地实现高效和可扩展的缓存策略,进而提升应用的性能和用户体验。Spring Boot的声明式缓存抽象和对多种缓存技术的支持,使得集成和使用缓存变得前所未有的简单。无论是在开发新应用还是优化现有应用,合理地使用缓存都是提高性能的有效手段。
50 1
|
2月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
39 0