HTML5 / JS - 启动几个webworkers [英] HTML5/JS - Start several webworkers

问题描述

我目前正在写一个程序，在这里我必须处理庞大的阵列。不过，我可以拆分这些阵列。我的计划现在是，来处理不同的网络工作者的阵列。我还从来不过与他们合作，做有几个问题：

1 如何将我运行多个网络工作者？我试图for循环看起来就像是：

 为（i = 0; I＆LT; eD.threads;我++）{
    //这里开始工
    VAR工人=新员工（JS /工人/ imageValues​​.js）;
    worker.postMessage（亮度，cD.pixels [I]）;
}
 

在这里，我得到的错误，该对象不能被克隆。这似乎是合乎逻辑的。我想这将是更好地将它们保存在一个数组？

2 如何将控制所有已经完成的工作？ （我需要重新组装阵列，并与稍后再处理）

3。有多少网络工作者带来真正的改善？

4。有没有高级教程，除了MDN入境？

感谢您！

解决方案

  

1。我将如何运行多个网络工作者？我试图for循环看起来就像是：

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

  

2。我将如何控制，所有已经完成的工作？ （我需要重新组装阵列，并与稍后再处理）

他们可以发布一条消息回给你时，他们做的，用的结果。下面的例子。

  

3。有多少网络工作者带来真正的改善？

有多长的绳子？ :-)答案将完全取决于此运行在目标机器上。很多人这几天都在他们的机器四个或更多内核。当然，该机正在做很多其他的事情也是如此。你必须调整你的目标环境。

  

4。是否有任何高级教程，除了MDN入境？

有没有很多高级关于网络工作者。 :-)我发现这篇文章就足够了。

下面是一个例子运行五劳，看他们做：

主窗口：

 （函数（）{
    变种N，工人，运行;    显示（启动工...）;
    运行= 0;
    为（n = 0时; N小于5 ++ n）的{
        工作人员=新员工（worker.js）;
        workers.onmessage = workerDone;
        workers.postMessage（{ID：N，数：10000}）;
        ++运行;
    }
    功能workerDone（五）{
        --running;
        显示（工人+ e.data.id +做，结果是：+ e.data.sum）;
        如果（运行=== 0）{//＆LT; ==这里没有竞争条件，请参阅下文
            显示（所有劳动者完成）;
        }
    }
    功能显示（MSG）{
        VAR P =使用document.createElement（'P'）;
        p.innerHTML =字符串（MSG）;
        document.body.appendChild（P）;
    }
}）（）;
 

worker.js ：

  this.onmessage =功能（E）{
    变种总和，正;
    总和= 0;
    为（n = 0时; N＆下; e.data.count ++ n）的{
        总和+ = N;
    }
    this.postMessage（{ID：e.data.id，总计：SUM}）;
};
 

关于不存在竞争条件：如果你想真正的pre-先发制人线程方面，那么你可能会想：我可以创建一个工人，增量运行为 1 ，然后我才创建下一个工人，我可以得到，它的完成，减量运行第一个消息到 0 ，并错误地认为所有的工人完成的。

这是无法在网络环境中的工人的工作发生。虽然环境是值得欢迎的，尽快启动工作，因为它喜欢和工人可以很好地完成前的code起工人完成后，所有的会做的是的队列的为主要的JavaScript线程 workerDone 函数的调用。没有pre-先发制人。所以我们知道，所有工人都在第一次调用之前已经开始 workerDone 实际执行。因此，当运行是 0 ，我们知道他们都完成了。

最后说明：在上面，我使用的onMessage = ... 挂钩事件处理程序。当然，这意味着我只能有我在做这与对象上的一个事件处理程序。如果你需要有对消息的多个处理程序时，请使用的addEventListener 。支持网络工作者的所有浏览器都支持的addEventListener 他们（youdon't担心IE的的attachEvent 的东西）。

I'm currently writing on a program, where I have to deal with huge arrays. I can however split those arrays. My plan now is, to process the arrays in different web workers. I have however never worked with them and do have several questions:

1. How would I run several web workers? I tried a for-loop looking like that:

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

Here I do get the error, that the object couldn't be cloned. Which seems logical. I guess it would be better to save them in an Array?

2. How would I control that all have finished their work? (I need to reassembly the array and work with it later)

3. How many web workers really bring an improvement?

4. Is there any advanced tutorial, besides the MDN-entry?

Thank you!

解决方案

1. How would I run several web workers? I tried a for-loop looking like that:

There's no problem with creating more than one worker, even if you don't keep track of them in an array. See below.

2. How would I control that all have finished their work? (I need to reassembly the array and work with it later)

They can post a message back to you when they're done, with the results. Example below.

3. How many web workers really bring an improvement?

How long is a piece of string? :-) The answer will depend entirely on the target machine on which this is running. A lot of people these days have four or more cores on their machines. Of course, the machine is doing a lot of other things as well. You'll have to tune for your target environment.

4. Is there any advanced tutorial, besides the MDN-entry?

There isn't a lot "advanced" about web workers. :-) I found this article was sufficient.

Here's an example running five workers and watching for them to be done:

Main window:

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

About the race condition that doesn't exist: If you think in terms of true pre-emptive threading, then you might think: I could create a worker, increment running to 1, and then before I create the next worker I could get the message from the first one that it's done, decrement running to 0, and mistakenly think all the workers were done.

That can't happen in the environment web workers work in. Although the environment is welcome to start the worker as soon as it likes, and a worker could well finish before the code starting the workers finished, all that would do is queue a call to the workerDone function for the main JavaScript thread. There is no pre-empting. And so we know that all workers have been started before the first call to workerDone is actually executed. Thus, when running is 0, we know they're all finished.

Final note: In the above, I'm using onmessage = ... to hook up event handlers. Naturally that means I can only have one event handler on the object I'm doing that with. If you need to have multiple handlers for the message event, use addEventListener. All browsers that support web workers support addEventListener on them (youdon't have to worry about the IE attachEvent thing).

这篇关于HTML5 / JS - 启动几个webworkers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！