web Worker 是运行在后台的javascript，是html5提供的一个多线程解决方案。不会影响页面的性能。
一、背景
js语言采用的是单线程模式，即：所有任务只能在一个线程上完成，一次只能做一件事，前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。
二、作用
Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。它独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
三、使用
1、创建：web Workers 的创建是在主线程中通过传入文件的url来实现的
var w = new Worker(“deme_worler.js”)；
返回的worker对象w可以与Worker线程进行通信
web主线程通过 ：
1、w.postMessage()向线程发送消息
2、w.onmessage=function(evt){}来监听worker线程发送到主线程的消息
3、w.οnerrοr=function(evt){}来监听线程中的错误消息
4、w.terminate()来告诉worker线程立即终止执行
worker新线程通过 ：
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage=function(event){}方法来接收主线程发送过来的数据。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
li{
list-style: none;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<button id="send">开始聊天</button>
<ul id="message">
</ul>
<script type="text/javascript">
if(typeof(Worker)!=="undefined"){
var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {//接收线程发过来的消息
console.log("Worker said : " + oEvent.data);
};
document.getElementById("send").onclick=function(){
var msg=prompt("说点什么")||"你好！";
myWorker.postMessage(msg);//向另外的线程发送消息
var li=document.createElement("li");
li.innerHTML="他说："+msg;
document.getElementById("message").appendChild(li);
myWorker.onmessage=function(data){
var li1=document.createElement("li");
li1.innerHTML="她回复："+data.data.msg+" "+data.data.time;
document.getElementById("message").appendChild(li1);
}
}
}else{
alert("不支持web worker ");
}
</script>
</body>
</html>
同源的web worker线程my_task.js:
onmessage = function (oEvent) {//对主线程回传回来的消息进行处理
postMessage( {
time:new Date(),
msg:oEvent.data+"[自动回复] "
});
};
52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
