Usar web workers

  • Enlace amigable (slug) de la revisión: Usar_web_workers
  • Título de la revisión: Usar web workers
  • Id de la revisión: 95331
  • Creada:
  • Creador: inma_610
  • ¿Es la revisión actual? No
  • Comentario page created, 1387 words added

Contenido de la revisión

{{ gecko_minversion_header ("1.9.2 p> ") }}

Workers constituye un medio sencillo para que el contenido web ejecute secuencias de comandos en subprocesos en segundo plano.  Una vez creado, un worker puede enviar mensajes a la tarea de generación mediante la publicación de mensajes en un controlador de eventos especificado por el creador.

El subproceso de trabajo puede realizar tareas sin interferir con la interfaz de usuario.  Además, pueden realizar E / S utilizando XMLHttpRequest (aunque los atributos responseXML y channel siempre son nulos).

Nota: como de costumbre, los subprocesos en segundo plano, incluyendo los workers, no pueden manipular el DOM.  Si las acciones adoptadas por el subproceso en segundo plano tienen que dar lugar a cambios en el DOM, deben enviar mensajes a sus creadores para hacer ese trabajo.

Consulta este documento de referencia workers, al que este artículo complementa ofreciendo ejemplos y añadiendo detalles. Para obtener una lista de funciones disponibles para workers, consulta las funciones disponibles para workers .

Acerca de la seguridad para subprocesos

La interfaz Worker genera subprocesos a nivel del sistema operativo y la simultaneidad puede producir efectos interesantes en el código si no tienes cuidado. Sin embargo, en el caso de web workers, los puntos de comunicación controlados cuidadosamente con otros subprocesos supone que en realidad sea muy difícil causar problemas de simultaneidad.  No hay acceso a componentes sin subprocesos seguros o al DOM y tienes que pasar datos específicos dentro y fuera de un subproceso a través de objetos serializados.  Así que te tienes que esforzar mucho para causar problemas en el código.

Generar un worker

Crear un nuevo worker es simple.  Lo único que tienes que hacer es llamar al constructor Worker(), especificando el URI de un script para ejecutar en el subproceso de trabajo y, si deseas poder recibir las notificaciones del worker, establece la propiedad onmessage del worker a una función de manejador de evento adecuada.

worker, set the worker's onmessage property to an appropriate event handler function.

var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) {
print("Llamado de nuevo por el worker\n");
};

La línea 1 de este ejemplo crea e inicia el subproceso de trabajo.  La línea 2 establece el controlador onmessage para el worker a una función que se llama cuando éste pide su propia función postMessage().

Generar subworkers

Los workers pueden generar más workers si así lo desean.  Los llamados subworkers deben estar alojados en el mismo origen que la página principal.  Además, los URI para los subworkers se resuelven en relación a la ubicación del worker principal y no en relación a la de la página propietaria.  Esto hace que sea más fácil que los workers realicen un seguimiento de dónde están sus dependencias.

Tiempos de espera e intervalos

Los workers pueden utilizar los tiempos de espera y los intervalos al igual que el proceso principal.  Esto puede ser útil, por ejemplo, si quieres hacer que tu subproceso de trabajo ejecute código de manera periódica en lugar de ininterrumpidamente.

Consulta setTimeout() , clearTimeout() , setInterval() y clearInterval() si deseas tener más detalles.

Terminar un worker

Si tienes que cancelar inmediatamente un worker que se está ejecutando, puedes hacerlo llamando al método terminate() del worker:

myWorker.terminate ();

El subproceso de trabajo se interrumpe inmediatamente y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.

Los workers pueden cerrarse llamando a su propio método {{ ifmethod ("nsIWorkerScope", "cerrar") }}.

Gestión de errores

Cuando se produce un error de ejecución en el worker, es llamado su controlador de enventos onerror.  Recibe un evento denominado error que implementa la interfaz ErrorEvent.  El evento no se lanza y se puede cancelar, para evitar que la acción predeterminada tenga lugar, el worker puede llamar al método preventDefault() del evento de error.

El evento de error tiene los siguientes tres campos que son de interés:

message
Un mensaje de error legible para el ojo humano.
filename
El nombre del archivo de script en el que se produjo el error.
lineno
El número de línea del archivo de script en el que se produjo el error.

Acceder al objeto navegador

Los workers pueden acceder al objeto navigator, que está disponible dentro de su ámbito.  Contiene las siguientes cadenas de texto que pueden usarse para identificar el navegador, tal y como se puede hacer a partir de secuencias de comandos normales:

  • appName
  • appVersion
  • platform
  • userAgent

Importar de secuencias de comandos y bibliotecas

Los subprocesos de trabajo tienen acceso a una función global, importScripts (), que les permite importar secuencias de comandos de comandos o bibliotecas dentro de su ámbito.  Acepta como parámetros cero o más URI de recursos para la importación, todos los ejemplos siguientes son válidos:

importScripts();                        /* no importa nada */
importScripts('foo.js'); /* importa sólo "foo.js" */
importScripts('foo.js', 'bar.js'); /* importa dos scripts */

Firefox carga cada secuencia de comandos de la lista, luego los ejecuta para permitirles que se inicialicen ellos mismos.  Los objetos globales de cada secuencia de comandos pueden entonces ser utilizados por el worker.

Nota: los scripts pueden ser descargados en cualquier orden, pero no se ejecutarán en el orden en que pasas los nombres de archivo a importScripts() .  Esto se realiza de forma sincrónica; importScripts() no retorna hasta que todas las secuencias de comandos se han cargado y ejecutado.

Ejemplos

Esta sección incluye varios ejemplos de cómo utilizar los DOM workers.

Realizar cálculos en segundo plano

Una utilidad de los workers es permitir que tu código realice cálculos intensivos en el procesador sin bloquear el subproceso de interfaz de usuario.  En este ejemplo, un worker se utiliza para calcular los números de Fibonacci.

El código JavaScript

El siguiente código JavaScript se almacena en el archivo "fibonacci.js" al que hace referencia el código HTML de la sección siguiente.

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

La función onmessage es llamada cuando el código HTML llamada al postMessage() en el worker.  Esto inicia la recursividad, generando copias nuevas de sí mismo para controlar cada iteración del cálculo.

El código HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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>

La página web crea un elemento div con el id. de cliente result , que se utiliza para mostrar el resultado, a continuación, genera el worker.  Tras generar el worker, el manejadoronmessage está configurado para mostrar los resultados mediante el ajuste de los contenidos del elemento div, y el manejador onerror se establece para volcar el mensaje de error.

Por último, se envía un mensaje al worker para iniciarlo.

Prueba este ejemplo .

Realizar E / S de web en segundo plano

Puedes encontrar un ejemplo de esto en el artículo Uso de los workers en las extensiones .

Dividir tareas entre varios workers

A medida que los equipos con varios núcleos se hacen cada vez más frecuentes, resulta útil dividir las tareas computacionalmente complejas entre varios workers, que a su vez pueden llevar a cabo esas tareas en núcleos de procesador múltiple.

el ejemplo se incluirá muy pronto

Crear workers desde dentro de los workers

El ejemplo de Fibonacci mostrado anteriormente demuestra que los workers pueden, de hecho, generar más workers.  Esto hace que sea fácil crear rutinas repetitivas.

Enviar objetos a los workers

Puede pasar con seguridad los objetos dentro y fuera de los workers que utilizan el método postMessage(), los objetos se convierten automáticamente en JSON de manera interna.

var onmessage = function(e) {
postMessage(e.data);
};
Nota: los objetos que se introducen o se extraer de los workers no deben contener funciones o referencias cíclicas, ya que JSON no es compatible con ellas.

Compatibilidad del navegador

Navegador Compatibilidad básica Notas
Internet Explorer ---  
Firefox (Gecko) 3.5 (1.9.1)  
Opera 10.60  
Chrome 3  
Safari 4  

Consulta también

{{ HTML5ArticleTOC () }}

{{ languages ( {"en": "En/Using_web_workers"} ) }}

Fuente de la revisión

<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-98" dir="ltr">{{ gecko_minversion_header ("1.9.2 p&gt; ") }}</span></span><br>
</p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Workers constituye un medio sencillo para que el contenido web ejecute secuencias de comandos en subprocesos en segundo plano.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una vez creado, un worker puede enviar mensajes a la tarea de generación mediante la publicación de mensajes en un controlador de eventos especificado por el creador.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El subproceso de trabajo puede realizar tareas sin interferir con la interfaz de usuario.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Además, pueden realizar E / S utilizando <code><a class="internal">XMLHttpRequest</a></code> (aunque los atributos <code>responseXML</code> y <code>channel</code> siempre son nulos).</span></span></p>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> como de costumbre, los subprocesos en segundo plano, incluyendo los workers, no pueden manipular el DOM.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si las acciones adoptadas por el subproceso en segundo plano tienen que dar lugar a cambios en el DOM, deben enviar mensajes a sus creadores para hacer ese trabajo.</span></span></div>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta este documento de referencia <a class="internal">workers</a>, al que este artículo complementa ofreciendo ejemplos y añadiendo detalles.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Para obtener una lista de funciones disponibles para workers, consulta <a>las funciones disponibles para workers</a> .</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Acerca de la seguridad para subprocesos</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La interfaz <code>Worker</code> genera subprocesos a nivel del sistema operativo y la simultaneidad puede producir efectos interesantes en el código si no tienes cuidado.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Sin embargo, en el caso de web workers, los puntos de comunicación controlados cuidadosamente con otros subprocesos supone que en realidad sea muy difícil causar problemas de simultaneidad.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">No hay acceso a componentes sin subprocesos seguros o al DOM y tienes que pasar datos específicos dentro y fuera de un subproceso a través de objetos serializados.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Así que te tienes que esforzar mucho para causar problemas en el código.</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Generar un worker</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Crear un nuevo worker es simple.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Lo único que tienes que hacer es llamar al constructor <code>Worker()</code>, especificando el URI de un script para ejecutar en el subproceso de trabajo y, si deseas poder recibir las notificaciones del worker, establece la propiedad <code>onmessage</code> del worker a una función de manejador de evento adecuada.</span></span></p>
<pre class="script"><span class="goog-gtc-unit" id="goog-gtc-unit-19-goog-gtc-unit-20-goog-gtc-unit-21-goog-gtc-unit-22-goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human">worker, set the worker's onmessage property to an appropriate event handler function.<br><br>var myWorker = new Worker('my_worker.js');<br>myWorker.onmessage = function(event) {<br>  print("Llamado de nuevo por el worker\n");<br>};</span></span></pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La línea 1 de este ejemplo crea e inicia el subproceso de trabajo.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La línea 2 establece el controlador <code>onmessage</code> para el worker a una función que se llama cuando éste pide su propia función <code>postMessage()</code>.</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Generar subworkers</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los workers pueden generar más workers si así lo desean.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los llamados subworkers deben estar alojados en el mismo origen que la página principal.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Además, los URI para los subworkers se resuelven en relación a la ubicación del worker principal y no en relación a la de la página propietaria.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto hace que sea más fácil que los workers realicen un seguimiento de dónde están sus dependencias.</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Tiempos de espera e intervalos</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los workers pueden utilizar los tiempos de espera y los intervalos al igual que el proceso principal.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto puede ser útil, por ejemplo, si quieres hacer que tu subproceso de trabajo ejecute código de manera periódica en lugar de ininterrumpidamente.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta <a class="internal"><code>setTimeout()</code></a> , <a class="internal"><code>clearTimeout()</code></a> , <a class="internal"><code>setInterval()</code></a> y <a class="internal"><code>clearInterval()</code></a> si deseas tener más detalles.</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Terminar un worker</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si tienes que cancelar inmediatamente un worker que se está ejecutando, puedes hacerlo llamando al método <code>terminate()</code> del worker:</span></span></p>
<pre class="script"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">myWorker.terminate ();</span></span>
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El subproceso de trabajo se interrumpe inmediatamente y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los workers pueden cerrarse llamando a su propio método {{ ifmethod ("nsIWorkerScope", "cerrar") }}.</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gestión de errores</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cuando se produce un error de ejecución en el worker, es llamado su controlador de enventos <code>onerror</code>.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Recibe un evento denominado <code>error</code> que implementa la interfaz <code>ErrorEvent</code>.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El evento no se lanza y se puede cancelar, para evitar que la acción predeterminada tenga lugar, el worker puede llamar al método <a class="internal"><code>preventDefault()</code></a> del evento de error.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El evento de error tiene los siguientes tres campos que son de interés:</span></span></p>
<dl> <dt><code>message</code></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Un mensaje de error legible para el ojo humano.</span></span></dd> <dt><code>filename</code></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nombre del archivo de script en el que se produjo el error.</span></span></dd> <dt><code>lineno</code></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El número de línea del archivo de script en el que se produjo el error.</span></span></dd>
</dl>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Acceder al objeto navegador</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los workers pueden acceder al objeto <code>navigator</code>, que está disponible dentro de su ámbito.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Contiene las siguientes cadenas de texto que pueden usarse para identificar el navegador, tal y como se puede hacer a partir de secuencias de comandos normales:</span></span></p>
<ul> <li><code>appName</code></li> <li><code>appVersion</code></li> <li><code>platform</code></li> <li><code>userAgent</code></li>
</ul>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Importar de secuencias de comandos y bibliotecas</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los subprocesos de trabajo tienen acceso a una función global, importScripts (), que les permite importar secuencias de comandos de comandos o bibliotecas dentro de su ámbito.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Acepta como parámetros cero o más URI de recursos para la importación, todos los ejemplos siguientes son válidos:</span></span></p>
<pre class="script"><span class="goog-gtc-unit" id="goog-gtc-unit-54-goog-gtc-unit-55-goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human">importScripts();                        /* no importa nada */<br>importScripts('foo.js');                /* importa sólo "foo.js" */<br>importScripts('foo.js', 'bar.js');      /* importa dos scripts */<br></span></span>
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Firefox carga cada secuencia de comandos de la lista, luego los ejecuta para permitirles que se inicialicen ellos mismos.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los objetos globales de cada secuencia de comandos pueden entonces ser utilizados por el worker.</span></span></p>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> los scripts pueden ser descargados en cualquier orden, pero no se ejecutarán en el orden en que pasas los nombres de archivo a <code>importScripts()</code> .</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Esto se realiza de forma sincrónica; <code>importScripts()</code> no retorna hasta que todas las secuencias de comandos se han cargado y ejecutado.</span></span></div>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">Ejemplos</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esta sección incluye varios ejemplos de cómo utilizar los DOM workers.</span></span></p>
<h3><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Realizar cálculos en segundo plano</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una utilidad de los workers es permitir que tu código realice cálculos intensivos en el procesador sin bloquear el subproceso de interfaz de usuario.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En este ejemplo, un worker se utiliza para calcular los números de Fibonacci.</span></span></p>
<h4><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El código JavaScript</span></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El siguiente código JavaScript se almacena en el archivo "fibonacci.js" al que hace referencia el código HTML de la sección siguiente.</span></span></p>
<pre class="script"><span class="goog-gtc-unit" id="goog-gtc-unit-68-goog-gtc-unit-69-goog-gtc-unit-70-goog-gtc-unit-71-goog-gtc-unit-72-goog-gtc-unit-73-goog-gtc-unit-74-goog-gtc-unit-75-goog-gtc-unit-76-goog-gtc-unit-77-goog-gtc-unit-78-goog-gtc-unit-79-goog-gtc-unit-80-goog-gtc-unit-81-goog-gtc-unit-82-goog-gtc-unit-83-goog-gtc-unit-84-goog-gtc-unit-85-goog-gtc-unit-86-goog-gtc-unit-87-goog-gtc-unit-88-goog-gtc-unit-89-goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-human">var results = [];<br><br>function resultReceiver(event) {<br>  results.push(parseInt(event.data));<br>  if (results.length == 2) {<br>    postMessage(results[0] + results[1]);<br>  }<br>}<br><br>function errorReceiver(event) {<br>  throw event.data;<br>}<br><br>onmessage = function(event) {<br>  var n = parseInt(event.data);<br><br>  if (n == 0 || n == 1) {<br>    postMessage(n);<br>    return;<br>  }<br><br>  for (var i = 1; i &lt;= 2; i++) {<br>    var worker = new Worker("fibonacci.js");<br>    worker.onmessage = resultReceiver;<br>    worker.onerror = errorReceiver;<br>    worker.postMessage(n - i);<br>  }<br> };</span></span></pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La función <code>onmessage</code> es llamada cuando el código HTML llamada al <code>postMessage()</code> en el worker.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto inicia la recursividad, generando copias nuevas de sí mismo para controlar cada iteración del cálculo.</span></span></p>
<h4><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El código HTML</span></span></h4>
<pre class="script"><span class="goog-gtc-unit" id="goog-gtc-unit-94-goog-gtc-unit-95-goog-gtc-unit-96-goog-gtc-unit-97-goog-gtc-unit-98-goog-gtc-unit-99-goog-gtc-unit-100-goog-gtc-unit-101-goog-gtc-unit-102-goog-gtc-unit-103-goog-gtc-unit-104-goog-gtc-unit-105-goog-gtc-unit-106-goog-gtc-unit-107-goog-gtc-unit-108-goog-gtc-unit-109-goog-gtc-unit-110-goog-gtc-unit-111-goog-gtc-unit-112-goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;<br>&lt;html&gt;<br>  &lt;title&gt;Test threads fibonacci&lt;/title&gt;<br>  &lt;body&gt;<br><br>  &lt;div id="result"&gt;&lt;/div&gt;<br><br>  &lt;script language="javascript"&gt;<br><br>    var worker = new Worker("fibonacci.js");<br><br>    worker.onmessage = function(event) {<br>      document.getElementById("result").textContent = event.data;<br>      dump("Got: " + event.data + "\n");<br>    };<br><br>    worker.onerror = function(error) {<br>      dump("Worker error: " + error.message + "\n");<br>      throw error;<br>    };<br><br>    worker.postMessage("5");<br><br>  &lt;/script&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;<br></span></span>
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La página web crea un elemento <code>div</code> con el id. de cliente <code>result</code> , que se utiliza para mostrar el resultado, a continuación, genera el worker.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-115"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Tras generar el worker, el manejador<code>onmessage</code> está configurado para mostrar los resultados mediante el ajuste de los contenidos del elemento <code>div</code>, y el manejador <code>onerror</code> se establece para <a class="external">volcar</a> el mensaje de error.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-116"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por último, se envía un mensaje al worker para iniciarlo.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-117"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr"><a class="external">Prueba este ejemplo</a> .</span></span></p>
<h3><span class="goog-gtc-unit" id="goog-gtc-unit-118"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Realizar E / S de web en segundo plano</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-119"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Puedes encontrar un ejemplo de esto en el artículo <a class="internal">Uso de los workers en las extensiones</a> .</span></span></p>
<h3><span class="goog-gtc-unit" id="goog-gtc-unit-120"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Dividir tareas entre varios workers</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-121"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">A medida que los equipos con varios núcleos se hacen cada vez más frecuentes, resulta útil dividir las tareas computacionalmente complejas entre varios workers, que a su vez pueden llevar a cabo esas tareas en núcleos de procesador múltiple.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-122"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">el ejemplo se incluirá muy pronto</span></span></p>
<h3><span class="goog-gtc-unit" id="goog-gtc-unit-123"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Crear workers desde dentro de los workers</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-124"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El ejemplo de Fibonacci mostrado anteriormente demuestra que los workers pueden, de hecho, generar más workers.</span></span>  <span class="goog-gtc-unit" id="goog-gtc-unit-125"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto hace que sea fácil crear rutinas repetitivas.</span></span></p>
<h3><span class="goog-gtc-unit" id="goog-gtc-unit-126"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Enviar objetos a los workers</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-127"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Puede pasar con seguridad los objetos dentro y fuera de los workers que utilizan el método <code>postMessage()</code>, los objetos se convierten automáticamente en <a class="internal">JSON</a> de manera interna.</span></span></p>
<pre class="script"><span class="goog-gtc-unit" id="goog-gtc-unit-128-goog-gtc-unit-129-goog-gtc-unit-130"><span class="goog-gtc-translatable goog-gtc-from-human">var onmessage = function(e) {<br>  postMessage(e.data);<br>};</span></span></pre>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-131"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota: los</strong> objetos que se introducen o se extraer de los workers no deben contener funciones o referencias cíclicas, ya que JSON no es compatible con ellas.</span></span></div>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-132"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Compatibilidad del navegador</span></span></h2>
<table class="standard-table"> <tbody> <tr> <th><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Navegador</span></span></th> <th><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Compatibilidad básica</span></span></th> <th><span class="goog-gtc-unit" id="goog-gtc-unit-135"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">Notas</span></span></th> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-136"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">Internet Explorer</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-137"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">---</span></span></td> <td> </td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-138"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Firefox (Gecko)</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-139"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr"><strong>3.5</strong> (1.9.1)</span></span></td> <td> </td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-140"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Opera</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-141"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">10.60</span></span></td> <td> </td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-142"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Chrome</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-143"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">3</span></span></td> <td> </td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-144"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">Safari</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-145"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">4</span></span></td> <td> </td> </tr> </tbody>
</table>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-146"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr">Consulta también</span></span></h2>
<ul> <li><code><a class="internal">Worker</a></code></li> <li><code><a>WorkerGlobalScope</a></code></li> <li><code><a class="internal">SharedWorker</a></code></li> <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-147"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Funciones disponibles para workers</span></span></a></li>
</ul>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-148"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">{{ HTML5ArticleTOC () }}</span></span></p> {{ languages ( {"en": "En/Using_web_workers"} ) }}
Revertir a esta revisión