Web workers - How do they work?

Question

I\'m trying to understand this example:

HTML (main code):

Answer 1

Check out HTML5 Rocks: The Basics of Web Workers for general tutorial.

• Workers will start as soon as you call the postMessage method of the worker.
• the function bound to worker's onmessage in the main code will work when the worker calls postMessage.
• 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 onmessage on 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 use addEventListener instead, catching message event:

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!)

Answer 2

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.