HTML 5 应用程序缓存讲解

2019-09-10 郑州网站建设  

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存(Application Cache)?

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器download更新过或更改过的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存,除了 Internet Explorer

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest HTML 文档(供离线浏览):

实例

<!DOCTYPE HTML>

一、DNS 预解析缓存众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。非常是为了并发download资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:

代码如下:

<link rel="dns-prefetch" href=http://www.divcss5.com/html5/"http:/cdn.staticfile.org/">

<link rel="dns-prefetch" href=http://www.divcss5.com/html5/"/www.谷歌-analytics.com">

淘宝网就应用了这项技术,你可以打开淘宝网,查看源代码,最顶端就把他们的一些 CDN 服务器进行了 DNS 解析缓存。2二、资源预加载资源预加载有很多方案,例如常见的图片预加载,有采用 CSS 的背景图片来预加载,大部分还是用 JS。目前 HTML5 提供了专门的资源预加载办法,有两个属性:prefetch(预读取)和 prerender(预渲染),分别被 Firefox Chrome 浏览器支持。

1).PREFETCH 预读取

预读取就是很常见的资源预加载,当前页面加载完成之后,就会在后面偷偷的download你指定的资源,一般是 JS CSS 图片这类的,也可以download页面:

代码如下:

<link rel="prefetch" href=http://www.divcss5.com/html5/"http:/b日志.wpjam.com/" />

<link rel="prefetch" href=http://www.divcss5.com/html5/"http:/wpjam.qiniudn.com/wpjam/标志.png" />

<link rel="prefetch alternate stylesheet" href=http://www.divcss5.com/html5/"mozspecific.css" />

注意,目前 Firefox 浏览器支持这个功能。

终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1637.html转载请标明出处,谢谢合作!
标签:
  • 1.HTML5
  • HTML
  • WEB
  • ò
  • 存储
  • 5
  • 2.H