［HTML5］ worker 多线程

来源：互联网发布：上海租房知乎编辑：程序博客网时间：2024/05/17 03:01

测试浏览器： 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><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"></mce: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 比如以下代码：

sub.js

onmessage = function(event){ postMessage(7);};

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

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

close 是worker自己销毁自己

terminate是worker创建者销毁worker