HTML5 worker 多线程

来源：互联网发布：管家婆软件管理员密码编辑：程序博客网时间：2024/05/29 09:51

测试浏览器： FF 3.6

测试服务器： APACHE 2.2

先让我们来幻想下如果WEB页面上能用多线程，那是不是意味这WEB页面逐渐取代了客户端？

HTML5 规范

好了切入正题，那么WEB的多线程到底是个虾米？

从字面上来看，我们应该看的出他的实现是WORKER模式吧，什么是WORKER模式？

写过多线程的同学应该比我更清楚，大体的概念是：线程的创建由一个WORKER来决定，维护了一个线程池。

接着，我们看下HTML5的多线程有什么特性的：

1. 在线程中是不能操作DOM节点的（想要操作的话只能发送消息给worker创建者回调函数）

2. 多线程的本质其实是真正的系统线程

3. 能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数

4. 能进行IO操作（ajax）

worker大致的流程是这样子的：

创建一个worker对象，绑定一个接收后台处理消息的方法 onmessage 和一个错误处理方法 onerror 。使用postMessage来传递数据，这个方法的参数是严格的JSON对象。当后台处理完使用postMessage方法将数据传回前台，也就是onmessage的方法。

接下来看例子：

这个例子是页面传递一个数让后台加3，然后在页面显示

调用者：

<!DOCTYPE html>

<html>

<head><title>worker Test</title>

</head>

<body>

</body>

var worker = new Worker("work.js");

worker.onmessage = function(event){

document.write(event.data);

};

worker.onerror = function(event){

alert(event.message);

};

worker.postMessage(1);

// --></script>

</html>

上面的代码创建了一个worker对象，然后初始化onmessage 和 onerror的方法，最后传入一个整数1

接着我们来看下worker.js的内容

onmessage = function(event) {

var data = event.data+3;

postMessage(data);

};

由于work.js是在Worker上下文下的，所以能直接使用 postMessage.

一旦使用了这个方法，那么它以下的代码将不执行，如果想要实现循环的话，建议使用setInterval

而且Worker没有锁的机制，多线程的同步问题只能靠代码来解决（比如定义信号变量）

这里还值得一提的是 worker中还能再有子worker 比如以下代码

var symbol = false;

var obj ;

var i = 0 ;

onmessage = function(event) {

obj = event.data;

callWorker();

};

setInterval(function(){

if(i == 10) {

postMessage(obj);

}

},100);

callWorker = function(){

var worker = new Worker("sub.js");

worker.onmessage = function(event){

obj.a = event.data;

i = 10;

};

worker.onerror = function(event){

throw e;

};

worker.postMessage(1);

};

sub.js

onmessage = function(event){

postMessage(7);

};

上述例子在父的worker中调用子worker：使用setInterval的方法等待i的值由子线程改变为10，然后返回到页面

这里还值得注意的方法有两个close 和 terminate

close 是worker自己销毁自己

terminate是worker创建者销毁worker