Web Worker javascript多线程编程（二）
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多线程编程（二）的更多相关文章
- Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- 【转】Web Worker javascript多线程编程（一）
原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...
- 深入理解javascript异步编程障眼法&&h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
- 转载:JavaScript多线程编程简介
虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题.造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌 ...
- Javascript模块化编程(二)AMD规范(规范使用模块)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...
- Linux系统编程@多线程编程(二)
线程的操作 线程标识 线程的ID表示数据类型:pthread_t (内核中的实现是unsigned long/unsigned int/指向pthread结构的指针(不可移植)几种类型) 1.对两个线 ...
- Javascript多线程引擎(二)
多线程Javascript解释器的大致架构 由于一个完整的解释器类似Google V8的解释器需要的工作量非常的大如需要实现如下的模块: 词法分析,语法分析器,AST转Byte模块,解释执行模块和JI ...
- JavaScript(DOM编程二)
文档加载完毕之后,在Window.onload方法中创建元素节点,添加到DOM文档中 代码演示: <html> <head lang="en"> <m ...
- java多线程编程(二)
1. wait 和 sleep 区别? 1.wait可以指定时间也可以不指定,sleep必须指定时间. 2.在同步中时,对cpu的执行权和锁的处理不同. wait:释放执行权,释放锁. sleep ...
随机推荐
- 解决使用IE8打开ADFS 3.0登录页面
系统上线前一天,发现客户竟然有XP系统和2003系统,这些系统都不能访问外网.测试时,客户端是IE8,打开我们系统ADFS的登录页面,一直在Loading,无法打开,也不报错.后来通过fiddler跟 ...
- 真正的汉化-PowerDesigner 16.5 汉化
一.背景 经常使用PowerDesigner,之前使用15版本,后来16出来后,就一直在使用16,不过一直是英文.一些同事对使用英文版总显示有些吃力. 遍寻百度.必应,都没有找到真正的针对版本16的汉 ...
- 编写一个通用的Makefile文件
1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...
- 邻接表的广度优先遍历(java版)
到 0 的权是 91 到 2 的权是 31 到 3 的权是 61 到 4 的权是 7 2 到 0 的权是 22 到 3 的权是 5 3 到 0 的权是 33 到 4 的权是 1 4 到 2 的权是 2 ...
- 字符型图片验证码识别完整过程及Python实现
字符型图片验证码识别完整过程及Python实现 1 摘要 验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的 防火墙 功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越 ...
- 再见Windows C++
我3年多以前写过一个小工具,是用来检测Windows操作系统的版本及其所安装的.NET Framework版本的,我用它来排查由于缺乏运行环境支持所导致的程序无法运行的问题.这个工具是用Visual ...
- 细说SSO单点登录
什么是SSO? 如果你已知道,请略过本节! SSO核心意义就一句话:一处登录,处处登录:一处注销,处处注销.即:在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 很多人容易把SS ...
- Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...
- is和as
一.明确两个基本概念 隐式转换: a.对于值类型,低精度=>高精度.eg:int=>long b.对于引用类型,子类向祖宗类转换过程.eg:对象=>Object 显式转换:显示转换是 ...
- ASP.NET免费服务器~支持MVC和Net4.5
1.先注册一个号.地址:https://appharbor.com/ 2.看看有没有你需要的插件,基本上都是免费的 3.本地创建git库 4.复制git远程仓库的地址 5.推送到远程仓库 6.查看自己 ...