HTML5 Web Workers

5,522 views

Published on

HTML5 Web Workers

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,522
On SlideShare
0
From Embeds
0
Number of Embeds
3,893
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

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.
  • HTML5 Web Workers

    1. 1. HTML5 Web Workers Rodolfo Finochietti
    2. 2. HTML5 Web Workers
    3. 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. 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. 5. Demo
    6. 6. Usando la API de Web Worker
    7. 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. 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. 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. 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. 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. 12. Browser Support• Chrome 4.0+• Firefox 3.5+• Safari 4.0+• Opera 10.6+• IE 10
    13. 13. ¿Preguntas?
    14. 14. rodolfof@lagash.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!

    ×