三个不常见的 HTML5 实用新特性简介

一、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

解析缓存。

二、资源预加载

资源预加载有很多办法，例如常见的图片预加载，有采用

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

浏览器支持这个功能。

2).PRERENDER

预渲染

这个更厉害了，不仅偷偷的提前下载，而且还给你渲染出来，当用户点击链接的时候，立刻给你展现出来。

复制代码

代码如下:<link

rel="prerender"

href="http://blog.wpjam.com/"

/>

注意，目前

Chrome

支持这个功能。

搜素引擎其实是最需要这种预读取的功能的，因为他们非常确定用户下一步要打开的页面（搜索结果页面），所以当用户输入搜索内容的时候，就可以提前把搜索结果页面的资源提前加载，而且应用之后，效果十分明显。

目前兼容性是个缺点，貌似只有

Chrome

和

Firefox

支持，而且用的

rel

属性是不同的，如果你想同时兼容两个浏览器，可以写成下面这样：

复制代码

代码如下:<link

rel="prefetch

prerender"

href="http://blog.wpjam.com"

/>

此外，当然为了安全没法跨域预加载资源，可能没法用在

CDN

了。

三、Download

属性

HTML5

的

Download

属性用来强制浏览器下载对应文件，而不是打开。Chrome

和

Firefox

等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的时候（例如

pdf

会直接在浏览器打开，mp3、mp4

等媒体直接用浏览器内置播放器播放）。但有时候，用户其实是希望直接下载而不是在浏览器上看看，这时就可以加上这个属性，属性值会对下载的文件重命名：

复制代码

代码如下:

<a

href="downloadpdf.php"

download="download.pdf">点击直接下载并保存成

download.pdf

文件</a>

如果你确定这个资源是用户肯定会下载的，就可以加上这个属性，还可以用

JS

或者手动改变想要保存的文件名。

HTML5

还有很多其他特性，但是看了很长时间书和各种资料，很少见到上面三个又比较实用的属性，拿出来分享一下。

<!-- 页面，可以使用绝对或者相对路径 --> 

<link rel="prefetch" href="page2.html" /> 

<!-- 图片，也可以是其他类型的文件 --> 

<link rel="prefetch" href="sprite.png" />

从上面的HTML代码可以看出，预加载使用 <link>标签，并指定 rel="prefetch" 属性，而href属性就是需要预加载的文件路径。而Mozilla还实现了一些类似的 link rel 属性:

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /> 

<link rel="next" href="2.html" />

备注： https 协议也同样支持。

何时需要预加载 

网站是否采用预加载取决于你的需求，下面是一些建议： 

- 如果一系列的页面幻灯片一样展示，那么可以预加载前后各1至3个页面. 

- 加载网站内部通用的图片 

- 在搜索结果页预加载下一页

阻止预加载 

Firefox 允许禁止预加载模式，代码如下： 

user_pref("network.prefetch-next", false)

以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。

页面可见性API--page Visbility

全屏API --full Screen

获取MediaAPI--getUserMedia

电池API --battery

资源预加载API--link Prefetching

Page Visibility 页面可见性API

该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换 *** 作时，可使用pageVisibility接口进行相应的事件监听和处理。)

page visibility的介绍

【document.hidden】 该值表示page是否是可见的,值为boolean值

【document.visibilityState】 这个visibilitystate 可有三个值得可能：

【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口

【hidden】 表示该page不是处于最前面的页面或者是处于一个最小化的窗口

【prerender】 表示该页面内容正在重新渲染并且该页面对于用户是不可见的

【isibilitychange Event】*监听window visibility 的改变的事件

相关代码：

// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChangeif (typeof document.hidden !== "undefined") { hidden = "hidden"visibilityChange = "visibilitychange"state = "visibilityState"} else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"visibilityChange = "mozvisibilitychange"state = "mozVisibilityState"} else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"visibilityChange = "msvisibilitychange"state = "msVisibilityState"} else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"visibilityChange = "webkitvisibilitychange"state = "webkitVisibilityState"} // 添加一个标题改变的监听器 document.addEventListener(visibilityChange, function(e) { // 开始或停止状态处理 }, false)

page visibility的用处

对于visibility的改变，我们可以怎么用了做什么呢。

我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新

我们还可以根据页面的是否可见来暂停和继续音频，视频的播放

我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。

Full Screen API全屏API

该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api.

Full Screen 的介绍

FullScreen 的API使用非常简单，其有两种模式

Launching Fullscreen Mode 启动全屏模式

// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen()} else if(element.mozRequestFullScreen) { element.mozRequestFullScreen()} else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen()} } // 启动全屏模式 launchFullScreen(document.documentElement)// the whole page launchFullScreen(document.getElementById("videoElement"))// any individual element

Exit FullScreen Mode 退出全屏模式

// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen()} else if(document.mozCancelFullScreen) { document.mozCancelFullScreen()} else if(document.webkitExitFullscreen) { document.webkitExitFullscreen()} } // Cancel fullscreen for browsers that support it! exitFullscreen()

Full Screen 的相关属性和事件

目前fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

【document.fullScreenElement】 该属性表示启动全屏的元素（如 video这些）

【document.fullScreenEnabled】该属性表示当前是否全屏

【fullscreenchange 事件】 监听全屏状态改变的事件

Full Scrren 的相关

css有一些关于fullscreen的css属性

-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */:-webkit-full-screen video { width: 100%height: 100%} /* styling the backdrop*/::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }

FullScreen的小结

第一次见到这个API是在看一些手机小说和移动端漫画网站时，发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api

getUserMedia API

该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。

getUserMedia API 的介绍

先阅读下下面的html

Snap Photo

相关JS代码

// 设置事件监听器 window.addEventListener("DOMContentLoaded", function() { // 获取元素 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code)}// 设置video监听器 if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = streamvideo.play()}, errBack)} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream)video.play()}, errBack)} }, false)

一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。

电池API（Battery API）

这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。

Battery API 的介绍

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery// 电池属性 console.warn("Battery charging: ", battery.charging)// 当前电池是否在充电 true console.warn("Battery level: ", battery.level)// 0.58 console.warn("Battery discharging time: ", battery.dischargingTime)// 添加事件监听器 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging)}, false)

为什么获取电池信息的API

为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。

Link Prefetching【预加载】

预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到

什么是link预加载

Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。

!-- full page --] [link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /] [!-- just an image --] [link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /]

什么时候使用link预加载是否在自己的网站使用预加载，可以参考一下几点：

当你做的是一种类似slideshow的网页，需要提前加载近1-3张页面（假设这些页面并不大）

预先加载在网站中许多网页都会用到的图片

预先加载网站搜索的结果的页面

---