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 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 离线的情况下,浏览器就直接使用离线存储的资源。


相关文章
|
29天前
|
XML 存储 缓存
【深入浅出Spring原理及实战】「缓存Cache开发系列」带你深入分析Spring所提供的缓存Cache管理器的实战开发指南(修正篇)
【深入浅出Spring原理及实战】「缓存Cache开发系列」带你深入分析Spring所提供的缓存Cache管理器的实战开发指南(修正篇)
44 0
|
29天前
|
存储 缓存 移动开发
HTML5 的离线储存怎么使用,工作原理
HTML5 的离线储存怎么使用,工作原理
25 0
|
14天前
|
存储 缓存 NoSQL
Redis 缓存失效策略及其应用场景
Redis 缓存失效策略及其应用场景
35 1
|
23天前
|
存储 缓存 前端开发
HTML应用缓存
HTML应用缓存
22 0
|
27天前
|
存储 缓存 中间件
中间件Read-Through Cache(直读缓存)策略工作原理
【5月更文挑战第11天】中间件Read-Through Cache(直读缓存)策略工作原理
21 3
|
28天前
|
缓存 数据安全/隐私保护 UED
深入了解304缓存原理:提升网站性能与加载速度
深入了解304缓存原理:提升网站性能与加载速度
|
29天前
|
存储 移动开发 缓存
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
18 2
|
29天前
|
移动开发 前端开发 应用服务中间件
前端——html拖拽原理
前端——html拖拽原理
22 0
|
29天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
52 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
29天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
51 0