一、理解
webworker并没有改变js单线程的本质,webworker多线程指的是浏览器多线程,因为浏览器可以提供多个js引擎的实例,每个实例可以独立的运行相应的程序,但在每个js引擎实例中js脚本还是在单线程得执行,每个实例就相当于一个webworker。
二、注意点
- webworker与主线程之间不能共享资源和作用域,通过异步事件在线程之间传递消息。
- webworker中不能访问window,document,parent对象,但是可以访问JSON(看到书上说applicationCache,navigator,location也可以访问,但实验了一下并不能访问,有知道怎么访问的还请指教啦)
- 同一个页面打开两次或者多次,创建webworker的路径是一样的,但是会创建不同的webworker,且是完全独立的。有些浏览器(Firefox,Chrome的高版本)支持共享Worker,通过 new ShareWorke来创建共享Worker实例
三、基本例子
//index.html
<body>
<div id="num"></div>
<input type="number" />
<button>发送</button>
<button>停止</button>
<script>
//子线程向主线程传递消息
var w = new Worker("worker.js");
// w.onmessage=function(e){//监听子线程的message事件
// document.getElementById("num").innerText = JSON.parse(e.data).num;
// }
w.addEventListener("message",function (e){//监听子线程的message事件,既可以采用这种方式,也可以用上边注释里的方式
document.getElementById("num").innerText = JSON.parse(e.data).num;
})
//主线程向子线程传递消息
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
var num= document.getElementsByTagName("input")[0].value;
w.postMessage(num);//向子线程发送message事件
}
var stopBtn = document.getElementsByTagName("button")[1];
stopBtn.οnclick=function() {
w.terminate();//停止webworker
}
</script>
</body>
//worker.js
var obj = {
num :999
}
postMessage(JSON.stringify(obj));
addEventListener("message",function (e) {
obj.num = e.data*2;
postMessage(JSON.stringify(obj));
//postMessage(obj);//报错
})
从这个例子中可看出
- 子线程内监听消息或者发送消息,直接调用addEventListener、postMessage即可
- 主线程内监听消息或者发送消息,要调用Worker实例上的addEventListener、postMessage
- 要想获得通信的实际内容,需要访问回调函数的参数中的data属性
- webworker里可以使用JSON来传递复杂类型值