js Worker 线程
在平时的运行的javascript脚本都在主线程中执行，如果当前脚本包含复杂的、耗时的代码。那么JavaScript脚本的执行将会被阻塞，甚至整个刘看齐都是提示失去响应。
例子：
假设程序需要计算、收集1~9999的之间所有质数，不采用后台线程，而是之间是使用JavaScript前台线程的计算、收集质数。代码如下。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 计算质数 </title>
</head>
<body>
<p>已经发现的所有质数：<div id="result"></div></p>
<script type="text/javascript">
var n = 1;
search:
while (n < 99999)
{
// 开始搜寻下一个质数
n += 1;
for (var i = 2; i <= Math.sqrt(n); i++)
{
// 如果除以n的余数为0，开始判断下一个数字。
if (n % i == 0)
{
continue search;
}
}
document.getElementById('result').innerHTML += (n + ", ");
}
</script>
</body>
</html>
浏览器久久未响应，一篇空白。最后过来七八秒全部崩出来。如果改为使用webWorker启用多线程呢？使用Worker创建贤臣非常简单，只要调用Worker的构造器就可以。
Worker(scriptURL):scriptURL用于指定所使用JavaScript脚本的路径
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var worker = new Worker('worker12.js');
worker.onmessage = function (event) {
document.getElementById("result").innerHTML += event.data + ",";
} </script>
</head>
<body>
<p>
已经发现的所有质数：<div id="result" style="width: 1500px; height:auto; border:1px solid red; word-wrap: break-word; ">
</div>
</p>
</body>
</html>
Worker.js
var n = 1;
search:
while (n < 10000) {
// 开始搜寻下一个质数
n += 1;
for (var i = 2; i <= Math.sqrt(n); i++) {
// 如果除以n的余数为0，开始判断下一个数字。
if (n % i == 0) {
continue search;
}
}
// 发现质数
postMessage(n);
}
注意：
Worker启动的子线程找到质数之后，并不能之间把找到的质数更新在页面上显示，必须通过postMessage(n)发送消息给前台JavaScript通信。
例子2：Worker线程交换数据：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多个线程交换数据</title>
<script>
var car = function () {
var start = document.getElementById("start1").value;
var end = document.getElementById("end1").value; if (start >= end) {
return; } else { var cal = new Worker("Worker.js");
// 定义需要提交给Worker线程的数据
var data = {
start: start,
end: end
};
// 向Worker线程提交数据。
cal.postMessage(JSON.stringify(data));
cal.onmessage = function (event) {
document.getElementById("result").innerHTML += event.data + ",";
}
}
} </script>
</head>
<body>
起始值：<input type="text" id="start1" /><br />
结束值：<input type="text" id="end1" /><br />
<input type="button" value="点击" onclick="car();" />
<div id="result" style="width: 1500px; height: auto; border: 1px solid red; word-wrap: break-word;">
</div>
</body>
</html>
worker.js
onmessage = function (event) {
// 将数据提取出来。
var data = JSON.parse(event.data);
// 取出start参数
var start = data.start;
// 取出end参数
var end = data.end;
var result = "";
search:
for (var n = start; n <= end; n++) {
for (var i = 2; i <= Math.sqrt(n); i++) {
// 如果除以n的余数为0，开始判断下一个数字。
if (n % i == 0) {
continue search;
}
}
// 搜集找到的质数
result += (n + ",");
}
// 发送消息，将会触发前台JavaScript脚本中
// Worker对象的onmessage方法
postMessage(result);
}
例子3：多个线程嵌套
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多个线程嵌套 </title>
<script>
var car = function () {
var start = document.getElementById("start1").value;
var end = document.getElementById("end1").value;
var count = document.getElementById("count1").value; var worker = new Worker('worker.js');
var data = {
start: start,
end: end,
count: count
};
worker.postMessage(JSON.stringify(data));
worker.onmessage = function (event) {
document.getElementById("result").innerHTML += event.data + ",";
} } </script>
</head>
<body>
起始值：<input type="text" id="start1" /><br />
结束值：<input type="text" id="end1" /><br />
个数：<input type="text" id="count1" /><br />
<input type="button" value="点击" onclick="car();" />
<div id="result" style="width: 1500px; height: auto; border: 1px solid red; word-wrap: break-word;">
</div>
</body>
</html>
worker.js
onmessage = function (event) {
// 将数据提取出来。
var data = JSON.parse(event.data);
// 取出start参数
var start = data.start;
// 取出end参数
var end = data.end;
// 取出count参数
var count = data.count;
var result = "";
search:
for (var n = start; n <= end; n++) {
for (var i = 2; i <= Math.sqrt(n); i++) {
// 如果除以n的余数为0，开始判断下一个数字。
if (n % i == 0) {
continue search;
}
}
// 搜集找到的质数
result += (n + ",");
}
// 再次启动Worker线程
var sub = new Worker("subworker.js");
// 把需要处理的数据传入启动的Worker线程中
sub.postMessage({ result: result, count: count });
sub.onmessage = function (event) {
// 发送消息，将会触发前台JavaScript脚本中
// Worker对象的onmessage方法
postMessage(event.data);
}
}
subworker.js
onmessage = function (event) {
// 将数据提取出来。
var data = event.data;
// 提取所有质数
var primeNums = data.result.split(",")
var randResult = "";
for (var i = 0; i < data.count; i++) {
// 计算一个随机索引值
var randIndex = Math.floor(Math.random()
* (primeNums.length - 1));
// 随机地"收集"一个质数
randResult += (primeNums[randIndex] + ",");
}
// 发送消息，将会触发启动它的JavaScript脚本中
// 对应Worker对象的onmessage方法
postMessage(randResult);
}
js Worker 线程的更多相关文章
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- 前端框架小实验-在umi框架中以worker线程方式使用SQL.js的wasm
总述:在Win7环境下配置umijs框架,在框架中用worker线程方式使用SQL.js的wasm,在浏览器端实现数据的增删改查以及数据库导出导入. 一.安装node.js 1.Win7系统只支持no ...
- HTML5_06之拖放API、Worker线程、Storage存储
1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象: var 全局变量=null; src.ondragstart=function(){ 全局变量=数据值; ...
- 模板应用--UI线程与worker线程同步 模仿c# invoke
由之前的一篇博文 <UI线程与worker线程><UI线程与worker线程>引出,UI线程与worker线程“串行化”在win32上实现是多么没有节操的事情,代码编写麻烦不说 ...
- UI线程与worker线程
也谈谈我对UI线程和worker线程的理解 UI线程又叫界面线程,能够响应操作系统的特定消息,包括界面消息.鼠标键盘消息.自定义消息等,是在普通的worker线程基础上加上消息循环来实现的,在这个消息 ...
- JS引擎线程的执行过程的三个阶段（二）
继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引 ...
- JS引擎线程的执行过程的三个阶段（一）
浏览器首先按顺序加载由<script>标签分割的js代码块,加载js代码块完毕后,立刻进入以下三个阶段,然后再按顺序查找下一个代码块,再继续执行以下三个阶段,无论是外部脚本文件(不异步加载 ...
- 在netty3.x中存在两种线程：boss线程和worker线程。
在netty 3.x 中存在两种线程:boss线程和worker线程.
- 前端之JS的线程(最易懂)
1. 前言 很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象.还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解. 我们都知道J ...
随机推荐
- 关于hibernate插入数据到mysql数据库中文乱码问题的解决
要想解决这个问题就要找到问题的症结所在 1.首先将数据提交到action输出看action里的数据是不是中文乱码,结果很遗憾并不是这里的问题 2.设置数据库连接url: 3.打开mysql安装文件里的 ...
- 什么是Java中的原子操作( atomic operations)
1.啥是java的原子性 原子性:即一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行. 一个很经典的例子就是银行账户转账问题: 比如从账户A向账户B转1000元,那么 ...
- JAVA垃圾回收机
垃圾回收基本算法 串型回收和并行回收 串行回收始终在一个CPU上执行回收操作.并行回收则将回收任务分为好几步,每步使用不同的CPU执行,这样加快了执行速度,有点像流水线作业. 并发执行和暂停应用程序 ...
- sqoop命令，mysql导入到hdfs、hbase、hive
1.测试MySQL连接 bin/sqoop list-databases --connect jdbc:mysql://192.168.1.187:3306/trade_dev --username ...
- Linux学习笔记之Linux启动引导过程
早期时,启动一台计算机意味着要给计算机喂一条包含引导程序的纸带,或者手工使用前端面板地址/数据/控制开关来加载引导程序.尽管目前的计算机已经装备了很多工具来简化引导过程,但是这一切并没有对整个过程进行 ...
- DNS ARP地址解析原理
ARP是地址解析协议 主机A与主机B之间如果要进行数据间的传输,需要获取对方的IP与物理地址(MAC),在只清楚ip的情况下,主机A向主机B请求链接,会先查找ARP高速缓存表,是否存在对应的主机B的i ...
- 1_archlinux_安装篇
系统安装 可参考网友的文章: https://www.douban.com/note/263375303/?type=like http://www.68idc.cn/help/server/linu ...
- 【咖啡の设备】Wacaco的minipresso便携咖啡机（咖啡粉版，胶囊版）
之前看到houjy527发帖说入手了一台minipresso胶囊版,想起来这货是个好玩具,出差旅行必备佳品(可惜我从没出过差) minipresso设计很赞,简直不能更方便了~ 下面是houjy527 ...
- codeforces291E Tree-String Problem
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- Codeforces Round #241 (Div. 2) B. Art Union 基础dp
B. Art Union time limit per test 1 second memory limit per test 256 megabytes input standard input o ...