HTML5 Web Workers

Rodolfo Finochietti

HTML5 Web Workers

HTML5 Web Workers• Sin Web Workers:• Las tareas de larga duración en JavaScript bloquean

cualquier otro JavaScript en la pagina• JavaScript puede hacer que se “cuelgue” la UI en algunos

browsers

• Con Web Workers:• Se agregan capacidades de procesamiento en Background

a las aplicaciones Web• Las operaciones en paralelo se pueden correr

concurrentemente

HTML5 Web Workers

• Web Workers se puede usar para• Procesamiento numérico intensivo• Actualización en background de una base de datos

remota desde una local• Actualización de precios desde el server• Search queries

Demo

Usando la API de Web Worker

HTML5 Web Workers

• No se puede acceder window.document• No hay acceso directo a la pagina ni al DOM• Si bien Web Workers no bloquean al UI

consumen CPU y pueden hacer el sistema menos responsivo

Como usar Web Workers

• Crear un objeto Web Worker y pasarle el archivo JavaScript a ejecutar

• Usar la Cross Document Messaging API (postMessage) para comunicarse con el thread principal

• En la pagina web:• Configurar un event listener asincrónico para

escucharlos mensajes y errores que vengan desde worker

• Llamar a postMessage para pasarle información al worker

//Check if Web Workers are supportedif (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML = “Your browser supports HTML5 Web Workers";}

//Create a new worker//The URL for the JavaScript file can be a relative or //absolute URL with the same origin //(the same scheme, host, and port) as the main pageworker = new Worker("echoWorker.js");

//to load additional JavaScriptimportScripts("helper.js, "anotherHelper.js");

JavaScript

//Main Pageworker.postMessage("Here's a message for you");

//Add event listenerworker.addEventListener("message", messageHandler, true);

//Process incoming messagesfunction messageHandler(e) { // process message from worker}

//Handle errorsworker.addEventListener("error", errorHandler, true);

//Stop workerworker.terminate();

JavaScript

//Workerfunction messageHandler(e) { postMessage("worker says: " + e.data + " too");}

addEventListener("message", messageHandler, true);

//Using a Web Worker within a Web Worker var subWorker = new Worker("subWorker.js");

JavaScript

Browser Support

• Chrome 4.0+• Firefox 3.5+• Safari 4.0+• Opera 10.6+• IE 10

¿Preguntas?

rodolfof@lagash.com http://twitter.com/rodolfof

http://shockbyte.net

¡GRACIAS!