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. asp.net core 实战之 redis 负载均衡和"高可用"实现

    1.概述 分布式系统缓存已经变得不可或缺,本文主要阐述如何实现redis主从复制集群的负载均衡,以及 redis的"高可用"实现, 呵呵双引号的"高可用"并不是 ...

  2. 《MySQL必知必会》学习笔记

    数据库:数据库是一种以某种有组织的方式存储的数据集合.其本质就是一个容器,通常是一个或者一组文件. 表:表示一种结构化的文件,可用来存储某种特定类型的数据. 模式:描述数据库中特定的表以及整个数据库和 ...

  3. transient关键字的用法

    本篇博客转自 一直在路上 Java transient关键字使用小记 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,Java ...

  4. Web 前端攻防（2014版）

    在百度 FEX 团队时写的.有次让我写点前端开发中注意的安全规范,结果写着写着就跑题了,写了一堆纯前端实现的攻击方式...当然还有防范措施. 文章就懒得粘过来了~ 直接贴个地址算了:) http:// ...

  5. Spring6：基于注解的Spring MVC（上篇）

    什么是Spring MVC Spring MVC框架是一个MVC框架,通过实现Model-View-Controller模式来很好地将数据.业务与展现进行分离.从这样一个角度来说,Spring MVC ...

  6. 不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你彻底看清前端MVVM的本质

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...

  7. ABP框架 - 日志

    文档目录 本节内容: 服务端 获取Logger(记录器) Logger的基类 配置 Abp.Castle.Log4Net 包 客户端 服务端 ABP使用Castle Windsor的日志记录工具,它可 ...

  8. TODO：这是一个我的自媒体

    TODO:这是一个我的自媒体 自媒体(外文名:We Media)又称"公民媒体"或"个人媒体",是指私人化.平民化.普泛化.自主化的传播者,以现代化.电子化的手 ...

  9. WEB 基础知识（一）

    1. 系统架构 1.1 B/S系统架构 1.2 C/S系统架构 1.3 对比与区别 1.3.1 概述 C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过 ...

  10. idea报错：error java compilation failed internal java compiler error

    idea下面报如下问题 error java compilation failed internal java compiler error 解决办法:Setting->Compiler-> ...