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异步编程障眼法&amp;&amp;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.概念           因为java是完全面向对象的,所以在java中,我们说的线程,就是Thread类的一个实例对象.所以,一个线程就是一个对象,它有自己字段和方法. 2.创建线程 创建线程有 ...

随机推荐

  1. Mui沉浸模式以及状态栏颜色改变

    沉浸模式只需要设置下就可以  ios:  打开应用的manifest.json文件,切换到代码视图,在plus -> distribute -> apple 下添加UIReserveSta ...

  2. webService 跨域请求webconfig配置

    在webService文件夹下单独添加一个web.config <?xml version="1.0" encoding="UTF-8"?>< ...

  3. dos命令复制当天生成的以日期为文件名的文件

    1.利用SqlServer的自动备份功能,将数据自动备份,备份出的文件格式如下:             db_backup_201001270930.bak 2.编辑bat脚本            ...

  4. oracle 表空间管理

    1.创建表空间 03:01:55 sys@ORADB11G> create tablespace TSPITR datafile '/u01/app/oracle/oradata/TSPITR0 ...

  5. System.Windows.Forms.AxHost.InvalidActiveXStateException”类型的异常在 ESRI.ArcGIS.AxControls.dll 中发生,但未在用户代码中进行处理

    private void CopyAndOverwriteMap() { //IObjectCopy接口变量申明 IObjectCopy objectCopy = new ObjectCopyClas ...

  6. (一)学习CSS之z-index属性

    参考:http://www.w3school.com.cn/cssref/pr_pos_z-index.asp z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元 ...

  7. HTML5初学者福利!11个在线学习网站推荐

    HTML5初学者福利!11个在线学习网站推荐 HTML5的强大及流行趋势,让更多的人想要系统的对它进行学习.而大多数人获取HTML5知识的重要途径都是网络,不过面对五花八门的搜索结果,是不是觉得摸不着 ...

  8. guava中eventbus注解使用

    guava是 google 几个java核心类库的集合,包括集合.缓存.原生类型.并发.常用注解.基本字符串操作和I/O等等.学会使用该库相关api的使用,能使我们代码更简洁,更优雅,本章节我们来谈谈 ...

  9. mysql技能提升篇 - Sqlyog高级应用

    mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据 ...

  10. hadoop2.6.0实践:002 检查伪分布式环境搭建

    1.检查网络配置[root@hadoop-master ~]# cat /etc/sysconfig/networkNETWORKING=yesHOSTNAME=hadoop-masterGATEWA ...