陈孝正摸郑微的胸,山西卫视节目表,初三语文视频
测试： 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>
<p id="result" >zz</p>
</body>
<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);
// --></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
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
我要评论
网友评论