Web workers - How do they work?
I'm trying to understand this example:
HTML (main code):
<html>
<title>Test threads fibonacci</title>
<body>
<div id="result"></div>
<script language="javascript">开发者_如何转开发
var worker = new Worker("fibonacci.js");
worker.onmessage = function(event) {
document.getElementById("result").textContent = event.data;
dump("Got: " + event.data + "\n");
};
worker.onerror = function(error) {
dump("Worker error: " + error.message + "\n");
throw error;
};
worker.postMessage("5");
</script>
</body>
</html>
Javascript (worker code):
var results = [];
function resultReceiver(event) {
results.push(parseInt(event.data));
if (results.length == 2) {
postMessage(results[0] + results[1]);
}
}
function errorReceiver(event) {
throw event.data;
}
onmessage = function(event) {
var n = parseInt(event.data);
if (n == 0 || n == 1) {
postMessage(n);
return;
}
for (var i = 1; i <= 2; i++) {
var worker = new Worker("fibonacci.js");
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n - i);
}
};
I have the following questions:
When exactly the worker code starts to run ? Immediately after the execution of
var worker = new Worker("fibonacci.js");?Is that true that
onmessage = function(event) { ... }assignment in the worker code will be executed beforeworker.postMessage("5");in the main code ?Can worker code access global variables that are defined in the main code (like
worker)?Can main code access global variables that are defined in the worker code (like
results)?It seems to me that
worker.onmessage = function(event) {...}in the main code has the same meaning likeonmessage = function(event) {...}in the worker code (which isonmessageevent handler of the worker). Where am I wrong ? What is the difference between them ?What this code should actually do ? When I run it here it just prints "5". Is that what it is supposed to do, or I'm missing something ?
Thanks a lot !
Check out HTML5 Rocks: The Basics of Web Workers for general tutorial.
- Workers will start as soon as you call the
postMessagemethod of the worker. - the function bound to worker's
onmessagein the main code will work when the worker callspostMessage. - global variables are not shared between main and worker threads. The only way to pass data is through messaging via
postMessage. - as you suspected, the
onmessageon both worker and main code has the same meaning. It is an event handler for when the thread receives a message event. You can even useaddEventListenerinstead, catchingmessageevent:
Main Code:
function showResult(event) {
document.getElementById("result").textContent = event.data;
dump("Got: " + event.data + "\n");
}
var worker = new Worker("fibonacci.js");
worker.addEventListener('message', showResult, false);
Worker code:
addEventListener('message', resultReceiver, false);
The fibonacci example you took is a recursive worker example. If not using workers, it would be something like this:
function fibonacci(n) {
if (n == 0 || n == 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
var result = fibonacci(5);
dump("Got: " + result + "\n");
(oh no, I'm not going to do a stackless for you. You write it yourself!)
I also want to add that you can debug web workers only in Chromium based browsers. You have to select Sources in developer panel and in right column expand bottom line Workers and then choose check box pause on start.
加载中,请稍侯......
精彩评论