HTML5六大高级特性详解-优快云博客

一、本文目录

1、HTML5 Web存储

2、HTML5 Web SQL 数据库

3、HTML5 应用程序缓存

4、HTML5 Web Worker

5、HTML5 服务器发送事件（Server-Sent Event）（SSE）

6、HTML5 WebSocket

二、正文

1、HTML5 Web存储

localStorage 永久存储

sessionStorage（当用户关闭浏览器窗口后，数据会被删除）

JSON.stringify 对象----->字符串

JSON.parse 字符串----> 对象

2、HTML5 Web SQL 数据库

客户端数据库

3、HTML5 应用程序缓存

通过创建 cache manifest 文件，创建web应用的离线版本。

优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性。

manifest 文件的建议的文件扩展名是：".appcache"。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

完整的Mainfest文件：

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

4、HTML5 Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。

Web Worker实现的是线程技术，可以使运行在后台的JavaScript独立于其他脚本，从而不会影响页面的性能。

检测浏览器是否支持 Web Worker：

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 创建 Web Worker 对象
    var w;
    w=new Worker("demo_workers.js");
}
else
{
    //抱歉! Web Worker 不支持
}

执行脚本的时候，使用postMessage方法，传递给网页数据；

onmessage回调函数会接收传递过来的数据，对该数据进行处理；

如果需要停止Worker，使用work.terminate();可以停止正在执行的脚本

5、HTML5 服务器发送事件（Server-Sent Event）（SSE）

Server-Sent 事件指的是网页自动获取来自服务器的更新。

EventSource对象用于接收服务器发送事件通知。

（1）接收 Server-Sent 事件通知

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

（2）检测 Server-Sent 事件支持

if(typeof(EventSource)!=="undefined")
{
    // 浏览器支持 Server-Sent
    // 一些代码.....
}
else
{
    // 浏览器不支持 Server-Sent..
}

（3）EventSource 对象

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

6、HTML5 WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。直到客户端或者服务器端的某一方主动的关闭连接。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

（1）创建WebSocket 对象

var Socket = new WebSocket(url, [protocol] );

（2）WebSocket 属性

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

属性

描述

Socket.readyState

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

（3）WebSocket事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发