{"id":3730,"date":"2017-10-11T22:39:36","date_gmt":"2017-10-11T22:39:36","guid":{"rendered":"http:\/\/disenodepagina.com\/disenoweb\/?p=3730"},"modified":"2017-10-11T22:39:36","modified_gmt":"2017-10-11T22:39:36","slug":"utilizacion-de-web-workers","status":"publish","type":"post","link":"https:\/\/disenodepagina.com\/disenoweb\/utilizacion-de-web-workers\/","title":{"rendered":"Utilizaci\u00f3n de web workers"},"content":{"rendered":"

Utilizaci\u00f3n de web workers<\/h1>\n

\"Utilizaci\u00f3n<\/p>\n

 <\/p>\n

UTILIZACI\u00d3N DE WEB WORKERS<\/p>\n

Un Worker es una manera\u00a0ejecutar c\u00f3digo<\/a>\u00a0JavaScript de manera\u00a0sitio web<\/em>\u00a0paralela al proceso principal, sin interferir con el navegador. El navegador sigue siendo responsable de solicitar y analizar ficheros, renderizar la vista, ejecutar JavaScript y cualquier otro proceso que consuma tiempo de procesado y que haga que el resto de tareas tengan que esperar. Y es aqu\u00ed donde los\u00a0Utilizaci\u00f3n de web workers<\/em><\/strong>\u00a0toman importancia.<\/p>\n

Al igual\u00a0dise\u00f1o web<\/em>\u00a0que con el resto de funcionalidades de HTML5, debemos comprobar su disponibilidad en el navegador en el que ejecutamos la aplicaci\u00f3n:<\/p>\n

if(Modernizr.webworkers)<\/p>\n

{<\/p>\n

alert(‘El explorador soporta Web workers’);<\/p>\n

}<\/p>\n

else<\/p>\n

{<\/p>\n

alert(‘El explorador NO soporta Web workers’);<\/p>\n

}<\/p>\n

Crear nuevo\u00a0dise\u00f1o<\/em>\u00a0Worker es muy sencillo. Tan s\u00f3lo tenemos que crear una nueva instancia del objeto Worker, indicando como par\u00e1metro del constructor el fichero JavaScript que contiene el c\u00f3digo que debe ejecutar el WorkerUtilizaci\u00f3n de web workers<\/em><\/strong>.<\/p>\n

var worker = new Worker(‘my_worker.js’);<\/p>\n

De esta manera tenemos disponible y listo para utilizar un nuevo Worker. En este momento, podr\u00edamos pensar que podemos llamar a m\u00e9todos o utilizar objetos definidos dentro del nuevo Worker, pero no nada m\u00e1s lejos de la realidad. La \u00fanica manera de comunicarnos con el nuevo Worker es a trav\u00e9s del paso de mensajes, como hemos visto anteriormente.<\/p>\n

worker.postMessage(‘Hello World’);<\/p>\n

\u00c9ste m\u00e9todo \u00fanicamente acepta un par\u00e1metro, la cadena de texto a enviar al Worker. Por otra parte, la manera de recibir mensajes originados en el Worker es definiendo un escuchador para el evento message. Los datos incluidos por el Worker se encuentran disponibles en la propiedad data del evento\u00a0Utilizaci\u00f3n de web workers<\/em><\/strong>.<\/p>\n

worker.addEventListener(‘message’, function(e) {\u00a0\u00a0\u00a0 alert(e.data); }, false);<\/p>\n

Evidentemente, dentro de un Worker necesitamos comunicarnos con el thread principal, tanto para recibir los datos de los mensajes como para nuevos datos de vuelta. Para ello, a\u00f1adimos un escuchador para el evento message, y enviamos los datos de vuelta utilizando el mismo m\u00e9todo postMessage.<\/p>\n

reservada this no hace referencia al objeto window, sino al Worker en s\u00ed mismo. Debido al comportamiento de ejecuci\u00f3n en paralelo de los Web workers, \u00e9stos solo pueden<\/p>\n

Los Workers tienen la capacidad de generar Workers secundarios. Esto significa, que podemos dividir la tarea principal en subtareas, y crear nuevos Workers dentro del Worker principal. Sin embargo, a la hora de utilizar los Subworkers, y antes de poder devolver el resultado final al hilo principal, es necesario asegurarse que todos los procesos han terminado.<\/p>\n

Utilizaci\u00f3n de web workers<\/em><\/strong><\/h2>\n

#Utilizaciondewebworkers<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Utilizaci\u00f3n de web workers   UTILIZACI\u00d3N DE WEB WORKERS Un Worker es una manera\u00a0ejecutar c\u00f3digo\u00a0JavaScript de manera\u00a0sitio web\u00a0paralela al proceso principal, sin interferir con el navegador. El navegador sigue siendo responsable de solicitar y analizar ficheros, renderizar la vista, ejecutar JavaScript y cualquier otro proceso que consuma tiempo de procesado y que haga que el […]\n","protected":false},"author":2,"featured_media":3522,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[478,477,8],"tags":[82,12,24,13,530,550],"class_list":["post-3730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-de-pagina","category-diseno-web","tag-diseno","tag-diseno-web","tag-diseno-web-df","tag-diseno-web-guadalajara","tag-sitio-web","tag-utilizacion-de-web-workers"],"_links":{"self":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/comments?post=3730"}],"version-history":[{"count":1,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3730\/revisions"}],"predecessor-version":[{"id":3731,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3730\/revisions\/3731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media\/3522"}],"wp:attachment":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media?parent=3730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/categories?post=3730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/tags?post=3730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}