关于webWorker的理解和简单例子

最新推荐文章于 2024-07-17 08:52:33 发布

朱维娜

最新推荐文章于 2024-07-17 08:52:33 发布

阅读量3.9k

点赞数 1

文章标签： HTML5 webWorker 单线程 JS JavaScript

本文链接：https://blog.csdn.net/zhu_06/article/details/79938664

版权

一、理解

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来传递复杂类型值

朱维娜

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
关于webWorker的理解和简单例子

一、理解webworker并没有改变js单线程的本质，webworker多线程指的是浏览器多线程，因为浏览器可以提供多个js引擎的实例，每个实例可以独立的运行相应的程序，但在每个js引擎实例中js脚本还是在单线程得执行，每个实例就相当于一个webworker。二、注意点webworker与主线程之间不能共享资源和作用域，通过异步事件在线程之间传递消息。webworker中不能访问window，do...
复制链接

扫一扫