La API HTML Web Workers

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

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

Ejemplo

El siguiente ejemplo crea un Web Worker simple que cuenta números en segundo plano.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<p>Contar números: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<p><strong>Ojo: </strong>Internet Explorer 9 y versiones más antiguas
no soportan Web Workers</p>

<script>
var w;

function startWorker(){
	if(typeof(Worker) !== "undefined"){
		if(typeof(w) == "undefined"){
			w = new Worker("demo_workers.js");
		}
		w.onmessage = function(event){
			document.getElementById("result").innerHTML = event.data;
		} else {
			document.getElementById("result").innerHTML = 
                  "Tu navegador no soporta Web Worker";
		}
	}
}

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

Crear un archivo Web Worker

Ahora, creamos nuestro Web Worker en un JavaScript externo. Aquí, creamos un script que cuenta. El script se almacena en el archivo «demo_workers.js«.

var i = 0;

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

timedCount();

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

Nota: Normalmente, los Web Workers no se utilizan para scripts tan simples, sino para tareas más intensivas de CPU.

Crear un objeto Web Worker

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

Las siguientes líneas verifican si el trabajador ya existe, si no, crea un nuevo objeto web worker y ejecuta el código en «demo_workers.js«.

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

Luego podemos enviar y recibir mensajes del Web Worker. Agregue un detector de eventos «onmessage» al Web Worker.

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

Cuando el Web Worker publica un mensaje, se ejecuta el código dentro del detector de eventos. Los datos del Web Worker se almacenan en event.data.

Terminar un Web Worker

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

Para terminar un Web Worker y liberar recursos del navegador/computadora, use el método terminate().

w.terminate();

Web Workers y el DOM

Dado que los Web Workers están en archivos externos, no tienen acceso a los siguientes objetos de JavaScript

  • El objeto window
  • El objeto document
  • El objeto parent