HTML5 Web Workers

Publicado el 23 agosto 2010 por Displaynone

HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.

Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.

El script que instancia el Worker sería así:

// Crea el Web Worker
var worker = new Worker("worker.js");
 
// Envía un mensaje al worker
worker.postMessage(0);
 
// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
	// evt.data es el valor devuelto por el Worker
	alert(evt.data);
}
 
// Trata los errores
worker.onerror = function (evt) {
	alert(evt.data);
}

Y el worker.js sería el siguiente:

// Ejemplo de Worker
onmessage = function (evt) {
    // evt.data es el valor enviado desde el javascript
    for (var i=evt.data, il=1000001; i<il; i++) {
        // Envía datos continuamente
        postMessage(i);
    }
}

Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:

onconnect = function(evt) {
  postMessage('Hola, acabas de conectarte al Worker');
}

Using HTML5 Web Workers to have background computational power