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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Web Workers

5,118

Published on

HTML5 Web Workers

HTML5 Web Workers

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

No Downloads
Views
Total Views
5,118
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 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: " + 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.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!

    ×