HTML5多线程JavaScript解决方案Web Worker-专用Worker和共享Worker的详细代码介绍(2)-木庄网络博客

当前第2页返回上一页

如果我们的网站或者App可以同时加载多个tab（标签页）
那么如果使用普通的worker我们可能会重复创造多个线程
这必然会占用系统资源
这时如果我们可以让App或整站的页面实例都能够共享一个worker
那就很棒了~
共享线程和专用线程使用方式差不多，稍微复杂一点点而已

1	`var worker = new SharedWorker('scripts/worker.js');`

由于共享线程需要与多个程序实例或页面链接
所以它需要通过某种方式来了解消息的来源
这个方式就是利用一个唯一标识符port（端口）
这样我们刚才的例子就需要写成这个样子

//demo.jsvar worker = new SharedWorker('scripts/worker.js');
worker.port.addEventListener('message', function(e){
  console.log(e.data); //500000000067109000}, false);
worker.port.start();

在主线程中
端口连接必须初始化
使用API worker.port.start();

//worker.jsfunction calculate(){
  var ret = 0;  for(var i = 1; i <= 1e9; i++){
    ret += i;
  }  return ret;
}
addEventListener('connect', function(e){
  var port = e.ports[0];
  port.start();
  port.postMessage(calculate());
});

在共享worker内部同样需要初始化端口连接port.start();
除此之外，我们还需要处理额外事件onconnect
这个事件为我们的特定连接提供了端口对象
而var port = e.ports[0];用于获取连接分配的端口

我们的onmessage事件就可以写在onconnect事件处理函数内部

addEventListener('connect', function(e){
  var port = e.ports[0];
  port.addEventListener('message', function(e){    ...
    port.postMessage(...);    ...
  });
  port.start();
});

除此之外，其他的功能共享Worker和专用Worker都是一样的

以上就是HTML5多线程JavaScript解决方案Web Worker-专用Worker和共享Worker的详细代码介绍的详细内容，更多文章请关注木庄网络博客！

返回前面的内容