欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

1.HTML5 Web 存储

2.HTML5 Web Workers

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

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

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

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

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

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

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

浏览器支持

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

HTML5 Cache Manifest 实例

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

实例

<!DOCTYPE HTML>

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

代码如下:

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

<link rel="dns-prefetch" href="//www.google-analytics.com">

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

1).PREFETCH 预读取

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

代码如下:

<link rel="prefetch" href="http://blog.wpjam.com/" />

<link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" />

<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

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

终止 Web Worker

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

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:

实例

<!DOCTYPE html>

Web Workers DOM

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

1.window 对象

2.document 对象

3.parent 对象

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h31505.shtml