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天前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
2月前
|
存储 缓存 NoSQL
作者推荐 | 企业级缓存技术解析,你必须知道的“9“大技术问题与常见误区
本文将深入剖析导致上述问题的九大根源,并提供相应的解决方案。请注意,本文以Java为例进行代码演示,但同样适用于其他技术平台的朋友。只需根据相应技术平台替换相关代码即可!
454 0
作者推荐 | 企业级缓存技术解析,你必须知道的“9“大技术问题与常见误区
|
20天前
|
缓存 应用服务中间件 数据库
【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(多级缓存设计分析)
【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(多级缓存设计分析)
26 1
|
24天前
|
存储 缓存 移动开发
HTML5 应用程序缓存
HTML5的离线缓存(Application Cache)允许网页存储资源以实现离线访问。通过manifest文件指定缓存内容和更新规则,比如列出要缓存的HTML、CSS、JS和图片。在HTML中引用manifest文件后,浏览器会根据文件变化更新缓存。但要注意,应用缓存不自动更新,需手动修改manifest触发,并且现代Web开发更多使用服务工作者(Service Workers)替代,以获得更优的离线体验和更新策略。
|
1月前
|
存储 NoSQL Redis
陌陌技术分享:陌陌IM在后端KV缓存架构上的技术实践
在本文中,陌陌数据库负责人冀浩东将聚焦探讨陌陌的 KV 系统架构选型思路,深入解析如何进行此类系统的甄选决策,同时进一步分享陌陌团队在采用 OceanBase(OBKV)过程中所经历的探索与实践经验。
31 0
|
1月前
|
数据采集 存储 JavaScript
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
本文旨在介绍如何利用PHP中的simple_html_dom库结合爬虫代理IP技术来高效采集和分析汽车之家网站的电动车参数。通过实际示例和详细说明,读者将了解如何实现数据分析和爬虫技术的结合应用,从而更好地理解和应用相关技术。
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
|
5月前
|
缓存 Java Maven
微服务技术系列教程(07) - SpringBoot - 缓存的使用
微服务技术系列教程(07) - SpringBoot - 缓存的使用
44 0
|
3月前
|
数据采集 安全 JavaScript
​HTML代码混淆技术:原理、应用和实现方法详解
​HTML代码混淆技术:原理、应用和实现方法详解
59 0
|
4月前
|
缓存 算法
HTTP 缓存技术 - 协商缓存
HTTP 缓存技术 - 协商缓存
44 1
HTTP 缓存技术 - 协商缓存
|
4月前
|
存储 缓存 算法
HTTP 缓存技术 - 强制缓存
HTTP 缓存技术 - 强制缓存
48 0
HTTP 缓存技术 - 强制缓存