All geek questions in one place

Web Workers - How Do They Work?

I am 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 (working 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 does only working code run? Immediately after execution var worker = new Worker("fibonacci.js"); ?

  • Is it true that the assignment of onmessage = function(event) { ... } in the working code will be executed before worker.postMessage("5"); in the main code?

  • Can working code access global variables that are defined in the main code (e.g. worker )?

  • Can main code access global variables defined in working code (e.g. results )?

  • It seems to me that worker.onmessage = function(event) {...} in the main code has the same meaning as onmessage = function(event) {...} in the working code (which is the onmessage event handler). Where am I mistaken? What is the difference between the two?

  • What should this code do? When I run it here , it just prints "5". Is that what he should do, or am I missing something?

Thanks a lot!

+4
source share
2 answers

Check out HTML5 Rocks: Webmaster Fundamentals for a General Tutorial.

  • Workers will begin work immediately after calling the postMessage method of the worker.
  • a function related to working 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 transfer data is through messaging through postMessage .
  • as you suspected, onmessage for the working and main code has the same meaning. This is an event handler when a thread receives a message event. You can even use addEventListener instead, catching the 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);

Work code:

 addEventListener('message', resultReceiver, false);

The example of the fibonacci you took is an example of a recursive worker. If you do not use workers, it will 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 make a stem for you). You write yourself!)

+5
source

I also want to add that you can only debug web workers in Chromium browsers . You should select "Sources" on the developer panel, and in the right column - "Workers" on the bottom line, and then select "Pause" at startup.

0
source

Source: https://habr.com/ru/post/1310728/

More articles:


All Articles