Download - HTML5 Web Workers
![Page 1: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/1.jpg)
HTML5 Web Workers
Rodolfo Finochietti
![Page 2: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/2.jpg)
HTML5 Web Workers
![Page 3: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/5.jpg)
Demo
![Page 6: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/6.jpg)
Usando la API de Web Worker
![Page 7: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/8.jpg)
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
![Page 9: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/9.jpg)
//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
![Page 10: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/10.jpg)
//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
![Page 11: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/11.jpg)
//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
![Page 12: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/12.jpg)
Browser Support
• Chrome 4.0+• Firefox 3.5+• Safari 4.0+• Opera 10.6+• IE 10
![Page 13: HTML5 Web Workers](https://reader036.vdocument.in/reader036/viewer/2022062319/557ad7c8d8b42a85648b473e/html5/thumbnails/13.jpg)
¿Preguntas?