html实现离线缓存(工作原理+怎么使用+应用场景)

简介: html实现离线缓存(工作原理+怎么使用+应用场景)

1.离线缓存是什么?

当用户没有连接因特网的时候可以正常访问站点和应用,连接因特网后,会加载离线缓存文件,进行更新,也就是说你没有连接因特网就可以正常访问一个网站,连接因特网后会加载离线缓存的文件。

2.离线缓存怎么使用?

       1.html页面:

        在html上面加一个manifest属性就行,属性值是缓存文件名称。

<!DOCTYPE html>
<html lang="en" manifest="new_file.manifest">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div>2435645</div>
    <script src="js/index.js"></script>
  </body>
 
</html>

  2.离线存储页面:

CACHE MANIFEST
#v0.11
 
CACHE://表示需要离线存储的资源列表,由于包含 manifest 文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
 
js/index.js
css/style.css  //多个文件的话直接换行就行
 
NETWORK:  //表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在 CACHE 和 NETWORK 中有一个相同的资源,那么这个资源还是会被离线存储,也就是说 CACHE 的优先级更高。
resourse/logo.png
 
FALLBACK:   // 表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问 offline.html。
/ /offline.html

3.离线缓存的原理?

离线缓存的原理是基于新建的一个文件的缓存机制(机制不是技术),通过文件上的解析清单离线存储资源,也就相当于和cookie一样被存储起来,当为离线状态时,会将离线存储的资源展现出来。

4.浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?

在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问 app,那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 离线的情况下,浏览器就直接使用离线存储的资源。


相关文章
|
9天前
|
JavaScript 前端开发 UED
HTML标签的工作原理是什么?
【6月更文挑战第28天】HTML标签的工作原理是什么?
12 1
|
18天前
|
存储 缓存 NoSQL
Redis 缓存失效策略及其应用场景
Redis 缓存失效策略及其应用场景
21 1
|
12天前
|
缓存
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
10 0
|
12天前
|
存储 缓存 JavaScript
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析,超详细!
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析,超详细!
|
2月前
|
存储 缓存 NoSQL
Redis 缓存失效策略及其应用场景
Redis 缓存失效策略及其应用场景
56 1
|
2月前
|
存储 缓存 中间件
中间件Read-Through Cache(直读缓存)策略工作原理
【5月更文挑战第11天】中间件Read-Through Cache(直读缓存)策略工作原理
28 3
|
2月前
|
存储 移动开发 缓存
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
24 2
|
2月前
|
XML 缓存 Java
MyBatis二级缓存解密:深入探究缓存机制与应用场景
MyBatis二级缓存解密:深入探究缓存机制与应用场景
205 2
MyBatis二级缓存解密:深入探究缓存机制与应用场景
|
2月前
|
存储 缓存 Java
探秘MyBatis缓存原理:Cache接口与实现类源码分析
探秘MyBatis缓存原理:Cache接口与实现类源码分析
46 2
探秘MyBatis缓存原理:Cache接口与实现类源码分析
|
2月前
|
存储 缓存 前端开发
HTML应用缓存
HTML应用缓存
29 0