Your SlideShare is downloading. ×
  • Like
HTML5 Web Workers
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 Web Workers


HTML5 Web Workers

HTML5 Web Workers

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Google Chrome – every tab is its own program (not one tab within a program). So if one tab goes down, the whole app doesn't crash.


  • 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("Heres 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: " + + " 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 ¡GRACIAS!