API de trabajadores web

Tabla de contenido

Un trabajador web es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.

¿Qué es un trabajador web?

Al ejecutar secuencias de comandos en una página HTML, la página deja de responder hasta que finaliza la secuencia de comandos.

Un trabajador web es un JavaScript que se ejecuta en segundo plano, de forma independiente. de otros scripts, sin afectar el rendimiento de la página. Puedes seguir haciendo lo que quieras: hacer clic, seleccionar cosas, etc., mientras el trabajador web se ejecuta en segundo plano.

Soporte del navegador

Los números de la tabla especifican las primeras versiones del navegador que son totalmente compatibles con Web Workers:


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Ejemplo de trabajadores web

El siguiente ejemplo crea un trabajador web simple que cuenta números en segundo plano:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
    // Some code.....
 }
 else {
    // Sorry! No Web Worker support..
 }

Crear un archivo de trabajo web

Ahora, creemos nuestro trabajador web en un JavaScript externo.

Aquí, creamos un script que cuenta. El script se almacena en el archivo "demo_workers.js":

let i = 0;

function timedCount()
{
    
i ++;
    
postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

La parte importante del código anterior es el método postMessage(), que se utiliza para publicar un mensaje en la página HTML.

Nota: Normalmente, los trabajadores web no se utilizan para scripts tan simples, sino para tareas que requieren más uso de CPU.

Crear un objeto de trabajo web

Ahora que tenemos el archivo del trabajador web, debemos llamarlo desde una página HTML.

Las siguientes líneas verifican si el trabajador ya existe; de lo contrario, crea un nuevo objeto de trabajador web y ejecuta el código en "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
 }

Luego podremos enviar y recibir mensajes del trabajador web.

Agregue un detector de eventos "onmessage" al trabajador web.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
 };

Cuando el trabajador web publica un mensaje, se ejecuta el código dentro del detector de eventos. Los datos del trabajador web se almacena en event.data.

Terminar un trabajador web

Cuando se crea un objeto de trabajo web, continuará escuchando mensajes (incluso después de que finalice el script externo) hasta que finalice.

Para finalizar un trabajador web y liberar recursos del navegador/computadora, use el Método terminar():

w.terminate();

Reutilizar el trabajador web

Si configura la variable de trabajador como indefinida, después de haberla terminado, puedes reutilizar el código:

w = undefined;

Código de ejemplo de trabajador web completo

Ya hemos visto el código del trabajador en el archivo .js. A continuación se muestra el código de la página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker()
{
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker()
{ 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Trabajadores web y el DOM

Dado que los trabajadores web están en archivos externos, no tienen acceso a los siguientes objetos JavaScript:

El objeto ventana
El objeto del documento
El objeto padre