一、理解
当在 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来传递复杂类型值