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 ...
随机推荐
- sgu 103 Traffic Lights 解题报告及测试数据
103. Traffic Lights Time limit per test: 0.25 second(s) Memory limit: 4096 kilobytes 题解: 1.其实就是求两点间的 ...
- java5引入的并发编程库
java5之后引入了java.util.concurrent包,专门用于解决java多线程问题. AtomicInteger用于解决原子性操作(i++,i--的问题): AtomicInteger ...
- Python面试题之Python正则表达式re模块
一.Python正则表达式re模块简介 正则表达式,是一门相对通用的语言.简单说就是:用一系列的规则语法,去匹配,查找,替换等操作字符串,以达到对应的目的:此套规则,就是所谓的正则表达式.各个语言都有 ...
- Python3.x：抢票
Python3.x:抢票 一个妹子叫我帮她买动车票,结果竟然没买到票:好吧,不好意思说买不到票,写个抢票程序来完成吧: 1,Chromediver安装: 因为需要chrome支持页面测试,所以需要安装 ...
- 【ES6】改变 JS 内置行为的代理与反射
代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
- 20145302张薇《Java程序设计》第四周学习总结
20145302 <Java程序设计>第四周学习总结 教材学习内容总结 第六章 继承共同行为 面向对象中,子类继承父类,避免重复的行为定义,不过并非为了避免重复定义行为就使用继承. 程序代 ...
- 20145327 《Java程序设计》第三周学习总结
20145327 <Java程序设计>第三周学习总结 教材学习内容总结 对象:存在的具体实体,具有明确的状态和行为. 类:具有相同属性和行为的一组对象的集合,用于组合各个对象所共有操作和属 ...
- log4j2按日志级别输出到指定文件
在项目中,可能会产生非常多的日志记录,为了方便日志分析,一般可以将日志按级别输出到指定文件,本次就先说说log4j2的实现吧: 1.先加入log4j2依赖包 2.写一个java类进行测试,类文件中仅仅 ...
- java并发容器之 SynchronousQueue [转]
SynchronousQueue 这个队列实现了 BlockingQueue接口 该队列的特点 1.容量为0,无论何时 size方法总是返回0 2. put操作阻塞,jquery插件库 直到另外一个 ...
- tomcat监控，自动重启shell脚本
tomcat监控,自动重启shell脚本如下,取名 monitor_tomcat.sh: #!/bin/sh # func:自动监控tomcat脚本并且执行重启操作 # 获取tomcat进程ID(其中 ...