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()构造函数来创建一个共享进程对象。

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

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

myWorker.port.start();

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

first.onchange = function() {

    myWorker.port.postMessage([first.value,second.value]);

    console.log('Message posted to worker');

  }

  second.onchange = function() {

    myWorker.port.postMessage([first.value,second.value]);

    console.log('Message posted to worker');

  }

  myWorker.port.onmessage = function(e) {

    result1.textContent = e.data;

    console.log('Message received from worker');

  }

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

onconnect = function(e) {

    var port = e.ports[0];

    port.addEventListener('message', function(e) {

      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);

      port.postMessage(workerResult);

    });

    port.start(); // 使用 addEventListener 监听message时需要. onmessage 则不需要
}

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

onconnect = function(e) {

  var port = e.ports[0];

  port.onmessage(function (e) {

    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);

    port.postMessage(workerResult);

  })

};

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

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

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

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

index1.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width">

    <title>Shared Workers basic example</title>

    <link rel="stylesheet" href="style.css">

    <!--[if lt IE 9]>

    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

</head>

<body>

<h1>Shared<br>Workers<br>basic<br>example</h1>

<div class="controls" tabindex="0">

    <form>

        <div>

            <label for="number1">Multiply number 1: </label>

            <input type="text" id="number1" value="0">

        </div>

        <div>

            <label for="number2">Multiply number 2: </label>

            <input type="text" id="number2" value="0">

        </div>

    </form>

    <p class="result1">Result: 0</p>

    <p><a href="index2.html" target="_blank">Go to second worker page</a></p>

</div>

</body>

<script src="index1.js"></script>

</html>

index1.js

var first = document.querySelector('#number1'),

    second = document.querySelector('#number2'),

    result1 = document.querySelector('.result1');

if (!!window.SharedWorker) {

  var myWorker = new SharedWorker("worker.js",'sw1_');

  first.oninput = function() {

    myWorker.port.postMessage([first.value, second.value]);

    console.log('Message posted to worker');

  };

  second.oninput = function() {

    myWorker.port.postMessage([first.value, second.value]);

    console.log('Message posted to worker');

  };

  myWorker.port.onmessage = function(e) {

    result1.textContent = e.data;

    console.log('Message received from worker');

  };

}

index2.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width">

    <title>Shared Workers basic example</title>

    <link rel="stylesheet" href="style.css">

    <!--[if lt IE 9]>

      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Shared<br>Workers<br>basic<br>example</h1>

    <div class="controls" tabindex="0">

    <form>

      <div>

        <label for="number3">Square number: </label>

        <input type="text" id="number3" value="0">

      </div>

    </form>

    <p class="result2">Result: 0</p>

    </div>

  </body>

  <script src="index2.js"></script>

</html>

index2.js

var squareNumber = document.querySelector('#number3'),

    result2 = document.querySelector('.result2');

if (!!window.SharedWorker) {

  var myWorker = new SharedWorker("worker.js",'sw2_');

  squareNumber.oninput = function() {

    myWorker.port.postMessage([squareNumber.value, squareNumber.value]);

    console.log('Message posted to worker');

  };

  myWorker.port.onmessage = function(e) {

    result2.textContent = e.data;

    console.log('Message received from worker');

  }

}

worker.js

onconnect = function(e) {

  var port = e.ports[0];

  port.onmessage = function(e) {

    var workerResult = name + 'Result: ' + (e.data[0] * e.data[1]);

    port.postMessage(workerResult);

  };

};

style.css

html {

  background-color: #7D2663;

  font-family: sans-serif;

}

h1 {

  margin:;

  font-size: 15vw;

  letter-spacing: -0.2rem;

  position: absolute;

  top:;

  z-index: -1;

}

p {

  margin: 0 0 1rem 0;

}

.controls {

  padding: 4vw;

  width: 75%;

  margin: 3vw auto;

  background-color: rgba(255, 255, 255, 0.7);

  border: 5px solid black;

  opacity: 0.3;

  transition: 1s all;

}

.controls:hover, .controls:focus {

  opacity:;

}

.controls label, .controls p, .controls input {

  font-size: 3vw;

}

.controls div {

  padding-bottom: 1rem;

}

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. Xamarin Android 应用程序内图标上数字提示

    最近在用 Xamarin 做一个 Android 应用,打开应用时,如果有新消息,需要在应用内的 Toolbar 或者首页的图标上显示数字提示.在这里和大家分享一下实现方法,如果你有更新好的实现方法, ...

  2. 信息安全－2：python之hill密码算法[原创]

    转发注明出处:http://www.cnblogs.com/0zcl/p/6106513.html 前言: hill密码算法我打算简要介绍就好,加密矩阵我用教材上的3*3矩阵,只做了加密,解密没有做, ...

  3. REGEX例子

    作为REGEX的例子,代码9.3显示了一个给定的文件有多少行,具有给定的模式,通过命令行输入(注:有更有效率的方式来实现这个功能,如Unix下的grep命令,在这里只是给出了另一种方式).这个程序像下 ...

  4. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  5. Linux Socket 原始套接字编程

    对于linux网络编程来说,可以简单的分为标准套接字编程和原始套接字编程,标准套接字主要就是应用层数据的传输,原始套接字则是可以获得不止是应用层的其他层不同协议的数据.与标准套接字相区别的主要是要开发 ...

  6. 用Maven部署war包到远程Tomcat服务器

    过去我们发布一个Java Web程序通常的做法就是把它打成一个war包,然后用SSH这样的工具把它上传到服务器,并放到相应的目录里,让Tomcat自动去解包,完成部署. 很显然,这样做不够方便,且我们 ...

  7. js中几种实用的跨域方法原理详解（转）

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  8. 序列化笔记之一：Google的Protocol Buffer格式分析

    从公开介绍来看,ProtocolBuffer(PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.作为一个学了多年通信的人,ProtocolBuffer在我看来是一种信源编码.所谓信 ...

  9. JS设计模式（二）

    5.迭代器模式 先实现一个简单的迭代器,类似于JQ里的$.each方法. var each = function (arr, callback) { for (var i = 0, l = arr.l ...

  10. hibernate一对一外键单向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...