HTML5/JS - 启动几个 webworkers答案

【问题标题】：HTML5/JS - Start several webworkersHTML5/JS - 启动几个 webworkers
【发布时间】：2013-08-14 01:08:01
【问题描述】：

我目前正在编写一个程序，我必须在其中处理巨大的数组。但是，我可以拆分这些数组。我现在的计划是，在不同的网络工作者中处理数组。然而，我从未与他们合作过，并且确实有几个问题：

1. 如何运行多个网络工作者？我尝试了一个看起来像这样的 for 循环：

for(i = 0; i < eD.threads; i++){
    //start workers here 
    var worker = new Worker("js/worker/imageValues.js");
    worker.postMessage(brightness, cD.pixels[i]);
}

我确实得到了错误，即无法克隆对象。这似乎合乎逻辑。我想将它们保存在一个数组中会更好吗？

2.我如何控制所有人都完成了工作？（我需要重新组装阵列并稍后使用它）

3.有多少网络工作者真正带来了进步？

4. 除了 MDN 入口，还有什么进阶教程吗？

谢谢！

【问题讨论】：

对于#2：您必须使用来自 Worker 的 postMessage 向该父 JS 发送一条消息，说明 worker 已完成处理（并可能传递结果）......所以您必须在循环中为每个 Worker 添加一个 onmessage 侦听器。您可能会将所有这些响应存储在一个数组中。当数组中的响应数与创建的工人数相同时，这应该意味着一切都已完成......您可以处理您创建的那个数组。这可以通过使用 jQuery 的延迟对象的概念来“更干净”
“不能被克隆”这里的意思是你传递给工人的东西不能被克隆。为了避免竞争条件，工作人员和主线程之间永远不会共享对象。对象必须要么被复制到 worker 的内存空间中，要么（使用Blobs 和类型化数组）主线程可能会将内存空间让给 worker 并丢失对对象的引用。
好的。读过，但忘记了。反正。如果我在循环中创建一个临时变量，将数组作为字符串安全并传递该字符串，那会是更好的解决方案吗？我在某处读到，我只向工人发送字符串，在其他地方它说，我可以传输变量？谢谢你们的解释，帮助我开始！
@stiller_leser According to the spec，worker 的 postMessage 可以传递几乎任何东西，除了函数和宿主对象（例如 DOM 节点）。如果您尝试传递包含函数或 DOM 节点的对象或数组，则复制将失败。

标签： javascript arrays html performance web-worker

【解决方案1】：

1。我将如何运行多个网络工作者？我尝试了一个看起来像这样的 for 循环：

创建多个工人没有问题，即使您没有在数组中跟踪它们。见下文。

2。我将如何控制所有人都完成了他们的工作？（我需要重新组装阵列并稍后使用它）

他们可以在完成后将消息发回给您，并附上结果。下面的例子。

3。有多少网络工作者真正带来了进步？

一根绳子有多长？ :-) 答案将完全取决于运行它的目标机器。现在很多人的机器上有四个或更多内核。当然，这台机器也在做很多其他的事情。您必须针对您的目标环境进行调整。

4。除了 MDN 入口，还有什么进阶教程吗？

关于网络工作者并没有太多“高级”。 :-) 我发现this article 已经足够了。

这是一个运行 5 个工人并观察他们完成的示例：

主窗口：

(function() {
    var n, worker, running;

    display("Starting workers...");
    running = 0;
    for (n = 0; n < 5; ++n) {
        workers = new Worker("worker.js");
        workers.onmessage = workerDone;
        workers.postMessage({id: n, count: 10000});
        ++running;
    }
    function workerDone(e) {
        --running;
        display("Worker " + e.data.id + " is done, result: " + e.data.sum);
        if (running === 0) { // <== There is no race condition here, see below
            display("All workers complete");
        }
    }
    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();

worker.js:

this.onmessage = function(e) {
    var sum, n;
    sum = 0;
    for (n = 0; n < e.data.count; ++n) {
        sum += n;
    }
    this.postMessage({id: e.data.id, sum: sum});
};

关于不存在的竞争条件：如果您考虑真正的抢先线程，那么您可能会想：我可以创建一个工作线程，将running 递增到1，然后在我创建之前下一个工人我可以从第一个工人那里得到它已经完成的消息，将running 递减到0，并错误地认为所有工人都完成了。

这不会发生在 web worker 工作的环境中。尽管欢迎环境尽快启动 worker，并且 worker 很可能在启动 worker 的代码完成之前完成，但唯一能做的就是queue 对主 JavaScript 线程的 workerDone 函数的调用。没有先发制人。因此我们知道在第一次调用workerDone 实际执行之前，所有工作人员都已启动。因此，当running 是0 时，我们知道它们都完成了。

最后说明：在上面，我使用onmessage = ... 来连接事件处理程序。自然地，这意味着我只能在我正在使用的对象上拥有一个事件处理程序。如果您需要为message 事件提供多个处理程序，请使用addEventListener。所有支持网络工作者的浏览器都支持addEventListener（你不必担心IE attachEvent的事情）。

【讨论】：

您好，感谢您的回答。我会努力解决的。 String 的片段实际上是一个画布的 imagaData 变成了一个字符串。对于 1300 * 1700px 的分辨率，您最终会得到一个长度为 8840000 的数组。所以我想我将数组分成 x 块（取决于用户可控的线程数）。整个数组的每个部分都将被处理。之后重建 imageData-array 并绘制到画布上。至少按照我的计划：D
@stiller_leser：听起来像是网络工作者的本意。 :-) 但我实际上并不是在谈论计算机意义上的字符串。 “一段绳子有多长？”是一个英国成语，基本意思是“有太多变量无法回答这个问题。”
:D - 我没想到这里有成语。在学校里没有太多成语，这么久了：你生活和学习。
对于任何发现这种胎面的人来说也是如此。 Canvas 元素现在具有特殊的传递语义，因此不再需要序列化为字符串 :)
This link 是很好的概述，“可转移对象”部分是您感兴趣的部分。

【解决方案2】：

stiller_leser。如果您仍然在解决问题，请查看ng-vkthread 插件。它允许您实现您正在尝试在项目中开发的并行计算技术。使用此插件，您可以同时在多个线程中执行多个功能。

函数可以直接在主线程中定义，也可以从外部javascript文件中调用。

功能可以是：

常规函数
对象的方法
具有依赖关系的函数
具有上下文的函数
匿名函数

基本用法：

/* function to execute in a thread */
function foo(str) {
    return str.toUpper();
}

function bar(str) {
    return str.toUpper();
}

// to execute these 2 functions in 2 threads: //

/* create objects, which you pass to vkThread as an argument*/
var param1 = {
      fn: foo,
      args: ['hello']
  };
var param2 = {
      fn: bar,
      args: ['world']
  }

/* run thread */
vkThread.execAll([param1,param2]).then(
  function (data) {
    $scope.repos = data[0] + ' ' + data[1]; // <-- HELLO WORLD
  }
);

示例和 API 文档：http://www.eslinstructor.net/ng-vkthread/demo/

希望这会有所帮助，

--瓦迪姆

【讨论】：