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); }
