trabajadores Web - ¿Cómo funcionan?

StackOverflow https://stackoverflow.com/questions/2896480

  •  04-10-2019
  •  | 
  •  

Pregunta

Estoy tratando de entender este ejemplo :

HTML (código principal): 

   <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 (código de trabajador): 

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

Tengo las siguientes preguntas:

  • Cuando exactamente los códigos trabajador comienza a correr? Inmediatamente después de la ejecución de var worker = new Worker("fibonacci.js");?

  • ¿Es cierto que la asignación onmessage = function(event) { ... } en el código trabajador será ejecutado antes worker.postMessage("5"); en el código principal?

  • Puede trabajador código de acceso variables globales que se definen en el código principal (como worker)?

  • puede tener acceso a código principal variables globales que se definen en el código de trabajador (como results)?

  • Me parece que worker.onmessage = function(event) {...} en el código principal tiene el mismo significado como onmessage = function(event) {...} en el código trabajador (que es controlador de eventos onmessage del trabajador). ¿Dónde estoy mal? ¿Cuál es la diferencia entre ellos?

  • Lo que este código debe hacer realmente? Cuando lo ejecuto aquí que sólo imprime "5". Es eso lo que se supone que hacer, o que estoy perdiendo algo?

Muchas gracias!

¿Fue útil?

Solución

HTML5 Rocks: Los fundamentos de la Web Workers para tutorial en general <. / p>

  • Los trabajadores se iniciará tan pronto como se llama al método postMessage del trabajador.
  • la función obligado a onmessage del trabajador en el código principal funcionará cuando el trabajador llama postMessage.
  • variables globales no se comparten entre principales y subprocesos de trabajo. La única manera de pasar datos es a través de mensajería a través de postMessage.
  • Como se sospechaba, el onmessage en tanto el código de los trabajadores y principal tiene el mismo significado. Se trata de un controlador de eventos para cuando el hilo recibe un suceso de mensaje. Incluso puede utilizar addEventListener lugar, la captura de eventos message:

Código principal: 

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

Código Trabajador: 

addEventListener('message', resultReceiver, false);

El ejemplo de Fibonacci que tomó es un ejemplo trabajador recursiva. Si no utiliza los trabajadores, sería algo como esto: 

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, no voy a hacer sin pérdida de velocidad para usted. Usted escribe usted mismo!)

Otros consejos

También quiero añadir que puede depuración trabajadores web sólo en los navegadores basados ??en cromo. Tiene que seleccionar Fuentes en el panel de desarrollador y en la columna de la derecha ampliar línea de fondo Trabajadores y luego seleccione la casilla de verificación pausa en el arranque .

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top