Web Workers

Web Workers I

Un Web Worker es una tarea que se ejecuta de forma paralela a la

ejecución de nuestro código de JavaScript y su objetivo es liberar de
carga al motor de Javascript principal que es el encargado de responder
a los eventos y acciones del usuario.
Web Workers II
● La especificación de Web Workers recomienda un API para generar
secuencias de comandos en segundo plano en tu aplicación web.
● Los Web Workers permiten realizar acciones como activar
secuencias de comandos con tiempos de ejecución largos para
gestionar tareas intensivas de computación, pero sin bloquear la
interfaz de usuario u otras secuencias de comandos para gestionar
las interacciones del usuario.
Tipos de Web Workers
1. W. Dedicados:

var worker = new Worker( file );

2. W. Compartidos:

var worker = new SharedWorker( file );

Compatibilidad Web Workers
Compatibilidad Shared Workers
Crear un Web Worker
var worker = new Worker( "miWW.js" );

● Si el archivo especificado existe, el navegador generará un nuevo subproceso de

Worker que lo descargará de forma asíncrona.
● El Worker no empezará hasta que el archivo se haya descargado completamente y se
haya ejecutado.
● El Worker descargara el archivo de forma asíncrona.
Enviar mensajes al Worker
● El Worker posee un método llamado postMessage() el cual envía un
mensaje al ámbito del Worker.
● Este método acepta un parámetro, el cual es un dato enviado al worker.
● En función del navegador o de la versión puede aceptar una cadena o un
objeto JSON como argumento único.

var worker = new Worker( "miWW.js" );

worker.postMessage('Hello World');
Escuchar los eventos del Worker I
● Tenemos dos maneras de escuchar los eventos enviados por el worker.

var worker = new Worker( "miWW.js" );

worker.onmessage = function (oEvent) {

console.log("Evento del Worker");
};

worker.addEventListener("message", function (oEvent) {

console.log("Evento del Worker");
});
Escuchar los eventos del Worker II
● Gestión de errores en un Worker.

var worker = new Worker( "miWW.js" );

worker.onerror = function (e){

throw e.data;
}

worker.addEventListener("error", function (e) {

throw e.data;
});
Recibir Mensajes en el Worker
● Cuando se ejecuta postMessage() desde la página principal, nuestro Worker
gestiona este mensaje definiendo un gestor onmessage para el evento
message.
● El Worker tiene disponible el método postMessage() para enviar mensajes a
la página principal.

self.addEventListener('message', function(e) {
self.postMessage("hola " + e.data);
});
Finalizar un Worker
En página principal:
worker.terminate();

En el Worker:
self.close();
Worker Completo
En página principal:
var worker = new Worker( "miWW.js" );

worker.onmessage = function (oEvent) {

console.log("Evento del Worker", oEvent.data);
};
worker.postMessage('Hello World');
En miWW.js
self.addEventListener('message', function(e) {

self.postMessage("hola " + e.data);

});
Consideraciones
● Los mensajes que se transfieren entre la página principal y los Workers se
copian, no se comparten.
● La página y el Worker no comparten la misma instancia, por lo que el
resultado final es la creación de un duplicado en cada transferencia.
● En el contexto de un Worker, tanto self como this hacen referencia al alcance
global del Worker.
Funciones de los Workers
● Funciones Disponibles:
● Funciones no Disponibles:
○ Objeto navigator.
○ DOM.
○ Objeto location.
○ Objeto window.
○ XMLHttpRequest.
○ Objeto document.
○ setTimeout()/clearTimeout() y
○ Objeto parent.
setInterval()/clearInterval().
○ Caché de la aplicación.
○ Importación (importScripts()).
○ Worker.