Web Worker javascript多线程编程（一）中提到有两种Web Worker：专用线程dedicated web worker，以及共享线程shared web worker。不过主要讲了专用线程dedicated web worker，并未提及共享线程shared web worker。那么这一篇文章继上一篇讲讲共享线程shared web worker。

shared web worker：运行的是更为普遍性的代码，可以为多个页面服务。它可以被与之相关联的多个页面访问，只有当所有关联的的页面都关闭的时候，该Shared web worker才会结束。

注意：如果要使共享进程可以连接到多个不同的页面，这些页面必须属于相同的域（相同的协议，主机以及端口）；

如何创建shared web worker
创建shared web worker与创建dedicated web worker方法类似，调用SharedWorker()构造函数，指定一个要在 worker 线程内运行的脚本的 uri。
下面的代码展示了如何通过SharedWorker()构造函数来创建一个共享进程对象。

  1. var myWorker = new SharedWorker("worker.js");

与dedicated web worker不同的是，shared web worker访问worker通过sharedworker.port属性创建了一个messageport对象，该对象可以用来进行通信和对共享进程进行控制。当使用addEventListener监听message事件时，端口需要手动启动，利用其start()方法，采用onmessage()则不用。

  1. myWorker.port.start();

端口开启后，使用port.postmessage()向SharedWorker发送消息，使用port.onmessage监听事件接收SharedWorker传递的消息，代码演示如下：

  1. first.onchange = function() {
  2.     myWorker.port.postMessage([first.value,second.value]);
  3.     console.log('Message posted to worker');
  4.   }
  5.  
  6.   second.onchange = function() {
  7.     myWorker.port.postMessage([first.value,second.value]);
  8.     console.log('Message posted to worker');
  9.   }
  10.  
  11.   myWorker.port.onmessage = function(e) {
  12.     result1.textContent = e.data;
  13.     console.log('Message received from worker');
  14.   }

在SharedWorker中，使用onconnect事件监听SharedWorker的所有页面连接在同一端口，同样用port.onmessage与页面通信接收消息，用port.postMessage向页面发回处理后的数据。

  1. onconnect = function(e) {
  2.     var port = e.ports[0];
  3.  
  4.     port.addEventListener('message', function(e) {
  5.       var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  6.       port.postMessage(workerResult);
  7.     });
  8.  
  9.     port.start(); // 使用 addEventListener 监听message时需要. onmessage 则不需要
    }

使用onmessage监听事件则代码如下：

  1. onconnect = function(e) {
  2.   var port = e.ports[0];
  3.   port.onmessage(function (e) {
  4.     var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  5.     port.postMessage(workerResult);
  6.   })
  7. };

注意：SharedWorker本身就是继承自Worker，所以与Worker一样受同样的限制，关于限制在Web Worker javascript多线程编程（一）中有介绍，在Worker的作用域中额外增添了applicationCache应用缓存(不过已经从web标准中删除)，另一个就是name，在使用构造函数创建SharedWorker对象时的一个可选参数。

  1. var myWorker = new SharedWorker("worker.js"，"workerName");

这样在worker的全局作用域中可访问name，在上例代码中值为"workerName"。

下面上一个两个html页面共享一个SharedWorker的完整简单例子：

index1.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <meta name="viewport" content="width=device-width">
  7.     <title>Shared Workers basic example</title>
  8.     <link rel="stylesheet" href="style.css">
  9.     <!--[if lt IE 9]>
  10.     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11.     <![endif]-->
  12. </head>
  13. <body>
  14. <h1>Shared<br>Workers<br>basic<br>example</h1>
  15. <div class="controls" tabindex="0">
  16.     <form>
  17.         <div>
  18.             <label for="number1">Multiply number 1: </label>
  19.             <input type="text" id="number1" value="0">
  20.         </div>
  21.         <div>
  22.             <label for="number2">Multiply number 2: </label>
  23.             <input type="text" id="number2" value="0">
  24.         </div>
  25.     </form>
  26.     <p class="result1">Result: 0</p>
  27.     <p><a href="index2.html" target="_blank">Go to second worker page</a></p>
  28. </div>
  29. </body>
  30. <script src="index1.js"></script>
  31. </html>

index1.js

  1. var first = document.querySelector('#number1'),
  2.     second = document.querySelector('#number2'),
  3.     result1 = document.querySelector('.result1');
  4. if (!!window.SharedWorker) {
  5.   var myWorker = new SharedWorker("worker.js",'sw1_');
  6.   first.oninput = function() {
  7.     myWorker.port.postMessage([first.value, second.value]);
  8.     console.log('Message posted to worker');
  9.   };
  10.   second.oninput = function() {
  11.     myWorker.port.postMessage([first.value, second.value]);
  12.     console.log('Message posted to worker');
  13.   };
  14.   myWorker.port.onmessage = function(e) {
  15.     result1.textContent = e.data;
  16.     console.log('Message received from worker');
  17.   };
  18. }

index2.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <meta name="viewport" content="width=device-width">
  7.     <title>Shared Workers basic example</title>
  8.     <link rel="stylesheet" href="style.css">
  9.     <!--[if lt IE 9]>
  10.       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11.     <![endif]-->
  12.   </head>
  13.   <body>
  14.     <h1>Shared<br>Workers<br>basic<br>example</h1>
  15.     <div class="controls" tabindex="0">
  16.     <form>
  17.       <div>
  18.         <label for="number3">Square number: </label>
  19.         <input type="text" id="number3" value="0">
  20.       </div>
  21.     </form>
  22.     <p class="result2">Result: 0</p>
  23.     </div>
  24.   </body>
  25.   <script src="index2.js"></script>
  26. </html>

index2.js

  1. var squareNumber = document.querySelector('#number3'),
  2.     result2 = document.querySelector('.result2');
  3. if (!!window.SharedWorker) {
  4.   var myWorker = new SharedWorker("worker.js",'sw2_');
  5.   squareNumber.oninput = function() {
  6.     myWorker.port.postMessage([squareNumber.value, squareNumber.value]);
  7.     console.log('Message posted to worker');
  8.   };
  9.   myWorker.port.onmessage = function(e) {
  10.     result2.textContent = e.data;
  11.     console.log('Message received from worker');
  12.   }
  13. }

worker.js

  1. onconnect = function(e) {
  2.   var port = e.ports[0];
  3.   port.onmessage = function(e) {
  4.     var workerResult = name + 'Result: ' + (e.data[0] * e.data[1]);
  5.     port.postMessage(workerResult);
  6.   };
  7. };

style.css

  1. html {
  2.   background-color: #7D2663;
  3.   font-family: sans-serif;
  4. }
  5.  
  6. h1 {
  7.   margin:;
  8.   font-size: 15vw;
  9.   letter-spacing: -0.2rem;
  10.   position: absolute;
  11.   top:;
  12.   z-index: -1;
  13. }
  14.  
  15. p {
  16.   margin: 0 0 1rem 0;
  17. }
  18.  
  19. .controls {
  20.   padding: 4vw;
  21.   width: 75%;
  22.   margin: 3vw auto;
  23.   background-color: rgba(255, 255, 255, 0.7);
  24.   border: 5px solid black;
  25.   opacity: 0.3;
  26.   transition: 1s all;
  27. }
  28.  
  29. .controls:hover, .controls:focus {
  30.   opacity:;
  31. }
  32.  
  33. .controls label, .controls p, .controls input {
  34.   font-size: 3vw;
  35. }
  36.  
  37. .controls div {
  38.   padding-bottom: 1rem;
  39. }

Web Worker javascript多线程编程（二）的更多相关文章

  1. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  2. 【转】Web Worker javascript多线程编程（一）

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  3. 深入理解javascript异步编程障眼法&&h5 web worker实现多线程

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...

  4. 转载:JavaScript多线程编程简介

    虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题.造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌 ...

  5. Javascript模块化编程(二)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...

  6. Linux系统编程@多线程编程(二)

    线程的操作 线程标识 线程的ID表示数据类型:pthread_t (内核中的实现是unsigned long/unsigned int/指向pthread结构的指针(不可移植)几种类型) 1.对两个线 ...

  7. Javascript多线程引擎(二)

    多线程Javascript解释器的大致架构 由于一个完整的解释器类似Google V8的解释器需要的工作量非常的大如需要实现如下的模块: 词法分析,语法分析器,AST转Byte模块,解释执行模块和JI ...

  8. JavaScript(DOM编程二)

    文档加载完毕之后,在Window.onload方法中创建元素节点,添加到DOM文档中 代码演示: <html> <head lang="en"> <m ...

  9. java多线程编程(二)

    1. wait 和 sleep 区别? 1.wait可以指定时间也可以不指定,sleep必须指定时间. 2.在同步中时,对cpu的执行权和锁的处理不同.  wait:释放执行权,释放锁.  sleep ...

随机推荐

  1. BZOJ 3238: [Ahoi2013]差异 [后缀数组 单调栈]

    3238: [Ahoi2013]差异 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2326  Solved: 1054[Submit][Status ...

  2. BZOJ 2119: 股市的预测 [后缀数组 ST表]

    2119: 股市的预测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 331  Solved: 153[Submit][Status][Discuss ...

  3. NYOJ 954

    首先观察: 2! = 2×1                 = (2)10     = (10)2,        则第一个1是第2位,2!有1个质因数23! = 3×2×1             ...

  4. 【Win10】UAP/UWP/通用 开发之 x:Bind

    [Some information relates to pre-released product which may be substantially modified before it's co ...

  5. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  6. [译]ZOOKEEPER RECIPES-Barriers

    Barrier 在分布式系统中常使用Barrier来阻塞进程,当满足一定条件后再恢复进行后续操作.Barrier在Zookeeper中可以通过设计一个Barrier节点来实现.Barrier 节点存在 ...

  7. 三、Redis基本操作——List

    小喵的唠叨话:前面我们介绍了Redis的string的数据结构的原理和操作.当时我们提到Redis的键值对不仅仅是字符串.而这次我们就要介绍Redis的第二个数据结构了,List(链表).由于List ...

  8. 05.GitHub实战系列~5.发布版本之分支操作+Tag讲解 2015-12-14

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（42）-工作流设计-表建立

    系列目录 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工作流设计,非常简便,再配合第三方编辑器,可以直接生成表单,我没有刻意的浏览很多工作流的实际设计,我认为工作流 ...

  10. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...