HTML5 worker 多线程

来源：互联网发布：mac难用照片整理编辑：程序博客网时间：2024/05/29 11:52

测试浏览器： 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，然后在页面显示

调用者：

[javascript] view plaincopy
<!DOCTYPE html>  
<html>  
    <head><title>worker Test</title>  
    <meta http-equiv="pragma" content="no-cache"></meta>  
    <meta http-equiv="expires" content="-1"></meta>  
    <meta http-equiv="cache-control" content="no-cache"></meta>  
    </head>  
    <body>  
        <div id="result" >zz</div>  
    </body>  
    <mce:script type="text/javascript"><!--  
        var worker = new Worker("work.js");    
        worker.onmessage = function(event){  
            document.write(event.data);  
        };  
        worker.onerror = function(event){  
            alert(event.message);  
        };  
        worker.postMessage(1);  
      
// --></mce:script>  
</html>  

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

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

[javascript] view plaincopy
onmessage = function(event) {  
    var data = event.data+3;  
    postMessage(data);  
};  

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

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

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

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

[javascript] view plaincopy
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

[javascript] view plaincopy
onmessage = function(event){  
        postMessage(7);  
};  

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

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

close 是worker自己销毁自己

terminate是worker创建者销毁worker