javascript - Web workers - How do they work?

Question

Welcome To Ask or Share your Answers For Others

javascript - Web workers - How do they work?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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 + "
");  
       };  

       worker.onerror = function(error) {  
         dump("Worker error: " + error.message + "
");  
         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 before worker.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 like onmessage = function(event) {...} in the worker code (which is onmessage event 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 !

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:24:36+0000

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 + "
");  
}
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 + "
");

(oh no, I'm not going to do a stackless for you. You write it yourself!)

Categories

javascript - Web workers - How do they work?

javascript - Web workers - How do they work?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags