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 ...
随机推荐
- $《Deep Work》思维导图读书笔记
深度思考和深度工作能力已经成为当今如何应对知识爆炸.信息碎片化时代的一项重要技能,也是克服信息焦虑症的一剂良方.<Deep Work>这本书正是讲述如何一步步进入你的深度工作模式.
- Ubuntu16.04中查看硬盘的型号和读取速度
最近在测试FTP服务器,上传和下载的速度与很多因数有关,其中,硬盘的读取速度就是其中不同的区别点,我同时用了三台不用的服务器架设FTP服务,一台是出来ftp服务外还含平台其他管理软件,一台是全新的系统 ...
- C++、Java、JavaScript中的正则表达式
C++(VS2013编译器):http://msdn.microsoft.com/zh-cn/library/bb982727.aspx#grammarsummary Java: ...
- C++之条形码，windows下zint库的编译及应用（一）
zint库是一个开源的第三方库,提供了生成条形码.二维码等功能.本文主要介绍zint库的生成及简单应用. 工具/原料 vs2012 代码文件下载 1 下载zint包 2 zint依赖另外两个库 ...
- 【Thinking in Java, 4e】初始化与清理
[用构造器确保初始化] [方法重载] 涉及基本类型的重载 1.如果传入的数据类型小于方法中声明的形式参数类型:实际数据类型会被提升. 2.如果传入的数据类型大于方法中声明的形式参数类型:编译器报错,应 ...
- WCF的异步调用
1.服务契约 namespace Contracts { [ServiceContract] public interface ICalculator { [OperationContract] do ...
- Excel水平线画不直，图形对象对不齐，怎么办
看够了千篇一律的数字报表,不妨添加些图形对象来调剂下,今天小编excel小课堂(ID:excel-xiaoketang 长按复制)给各位分享10个插入图形对象时简单实用的小技巧. 01课题 今天小编e ...
- Spring Boot 上传图片文件
步骤一:基于前面springboot入门小demo 基于的springboot入门小demo,已包含了前面文章的知识点(比如:热部署.全局异常处理器). 步骤二:创建uploadPage.jsp上传页 ...
- 01_zookeeper简介(刷新)
1. 分布式系统及其问题 zookeeper是帮助我们构建分布式系统的一个软件(协调员的角色)首先,我们要明白分布式系统以及它的问题,之后才能理解为什么有zookeeper 1.1 分布式系统 分布式 ...
- LA 5135 井下矿工（点—双连通分量模板题）
https://vjudge.net/problem/UVALive-5135 题意:在一个无向图上选择尽量少的点涂黑,使得任意删除一个点后,每个连通分量至少有一个黑点. 思路: 首先dfs遍历求出割 ...