Web Workers permiten ejecutar tareas en segundo plano para evitar que JavaScript bloquee la interfaz de usuario. Sin Web Workers, las tareas largas bloquean todo el JavaScript en la página, pero con Web Workers estas tareas pueden ejecutarse concurrentemente. Web Workers se puede usar para procesamiento intensivo, actualización de bases de datos remotas y precios, y búsquedas. Para usar Web Workers, se crea un objeto worker que ejecuta JavaScript de forma asíncrona, y se comunica con el hilo principal a través de mensajes.

1. HTML5 Web Workers
Rodolfo Finochietti

2. HTML5 Web Workers

3. 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

4. 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

5. Demo

6. Usando la API de Web Worker

7. 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

8. 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

9. JavaScript
//Check if Web Workers are supported
if (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 page
worker = new Worker("echoWorker.js");
//to load additional JavaScript
importScripts("helper.js, "anotherHelper.js");

10. JavaScript
//Main Page
worker.postMessage("Here's a message for you");
//Add event listener
worker.addEventListener("message", messageHandler,
true);
//Process incoming messages
function messageHandler(e) {
// process message from worker
}
//Handle errors
worker.addEventListener("error", errorHandler, true);
//Stop worker
worker.terminate();

11. JavaScript
//Worker
function 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");

12. Browser Support
• Chrome 4.0+
• Firefox 3.5+
• Safari 4.0+
• Opera 10.6+
• IE 10

13. ¿Preguntas?

14. rodolfof@lagash.com
http://twitter.com/rodolfof
http://shockbyte.net
¡GRACIAS!