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 ...
随机推荐
- web前端基础——初识JavaScript
1 JavaScript概述 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚 ...
- ubuntu 14.04 163镜像
1.备份原来/etc/apt/sources.list 2.以下内容覆盖原来文件内容 deb http://mirrors.163.com/ubuntu/ trusty main restricted ...
- JAVA面试题整理（1）-基础
1.List 和 Set 的区别 共同点:它们都是Collection的子接口 区别: List:这个接口能够精准的记录每一个元素的插入位置(换句话说就是这个接口内容所有元素是按照顺序去保存的),使 ...
- C++DFS方法全排列
前几天看纪磊的<啊哈!算法>一书,里面讲算法讲的特别通俗细致,真的是初中生都能读得懂的算法书(我大二才读:P).这段代码很适合初学算法的同学. #include<iostream&g ...
- ssh-keygen 的 详解
为了让两个Linux机器之间使用ssh不需要用户名和密码.所以采用了数字签名RSA或者DSA来完成这个操作. 模型分析 假设 A (192.168.20.59)为客户机器,B(192.168.20.6 ...
- 4.9版本的linux内核中实时时钟芯片pcf85263的驱动源码在哪里
答:drivers/rtc/rtc-pcf85263.c,内核配置选项为 CONFIG_RTC_DRV_PCF85263 Location: -> Device Drivers -> Re ...
- 【Network Architecture】Densely Connected Convolutional Networks 论文解析
目录 0. Paper link 1. Overview 2. DenseNet Architecture 2.1 Analogy to ResNet 2.2 Composite function 2 ...
- 自学Java测试代码 - 简单地Student类
2017-08-23 23:45:38 writer:pprp 写这个还蛮开心的 package test; public class Student { //创建成员变量 String name ...
- 生产消费模式：多线程读写队列ConcurrentQueue
需求:现需要将多个数据源的数据导入到目标数据库,这是一个经典的生产消费应用的例子. 直接上代码,看下实现: // 初始化列队缓冲区 队列大小为100 IDataCollection<List&l ...
- centos7.1 从源码升级安装Python3.5.2
http://blog.csdn.net/tengyunjiawu_com/article/details/53535153 centos7.1 从源码升级安装Python3.5.2(我写的,请大家度 ...