一、理解
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
webworker并没有改变js单线程的本质，webworker多线程指的是浏览器多线程，因为浏览器可以提供多个js引擎的实例，每个实例可以独立的运行相应的程序，但在每个js引擎实例中js脚本还是在单线程得执行，每个实例就相当于一个webworker。
所有主流浏览器都支持weworker，除了Internet explorer。
二、注意点
-
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.onclick=function() {
w.terminate();//停止webworker
}
</script>
</body>
//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.onclick=function() { w.terminate();//停止webworker } </script> </body>
从这个例子中可看出
-
子线程内监听消息或者发送消息，直接调用addEventListener、postMessage即可
-
主线程内监听消息或者发送消息，要调用Worker实例上的addEventListener、postMessage
-
要想获得通信的实际内容，需要访问回调函数的参数中的data属性
-
webworker里可以使用JSON来传递复杂类型值