{"id":291,"date":"2024-05-21T10:24:34","date_gmt":"2024-05-21T08:24:34","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=291"},"modified":"2024-05-21T10:24:35","modified_gmt":"2024-05-21T08:24:35","slug":"68-la-api-html-web-workers","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/68-la-api-html-web-workers\/","title":{"rendered":"68. La API HTML Web Workers"},"content":{"rendered":"\n

Un Web Worker<\/strong> es un JavaScript<\/strong> que se ejecuta en segundo plano, sin afectar el rendimiento de la p\u00e1gina.<\/p>\n\n\n\n

Al ejecutar secuencias de comandos en una p\u00e1gina HTML, la p\u00e1gina deja de responder hasta que finaliza la secuencia de comandos.<\/p>\n\n\n\n

Ejemplo<\/h2>\n\n\n\n

El siguiente ejemplo crea un Web Worker<\/strong> simple que cuenta n\u00fameros en segundo plano.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n\n<\/head>\n<body>\n<p>Contar n\u00fameros: <output id=\"result\"><\/output><\/p>\n<button onclick=\"startWorker()\">Start Worker<\/button>\n<button onclick=\"stopWorker()\">Stop Worker<\/button>\n<p><strong>Ojo: <\/strong>Internet Explorer 9 y versiones m\u00e1s antiguas\nno soportan Web Workers<\/p>\n\n<script>\nvar w;\n\nfunction startWorker(){\n\tif(typeof(Worker) !== \"undefined\"){\n\t\tif(typeof(w) == \"undefined\"){\n\t\t\tw = new Worker(\"demo_workers.js\");\n\t\t}\n\t\tw.onmessage = function(event){\n\t\t\tdocument.getElementById(\"result\").innerHTML = event.data;\n\t\t} else {\n\t\t\tdocument.getElementById(\"result\").innerHTML = \n                  \"Tu navegador no soporta Web Worker\";\n\t\t}\n\t}\n}\n\nfunction stopWorker() {\n\tw.terminate();\n\tw = undefined;\n}\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
Crear un archivo Web Worker<\/h2>\n\n\n\n
Ahora, creamos nuestro Web Worker<\/strong> en un JavaScript<\/strong> externo. Aqu\u00ed, creamos un script que cuenta. El script se almacena en el archivo \u00abdemo_workers.js<\/em>\u00ab.<\/p>\n\n\n\n
var i = 0;\n\nfunction timedCount() {\n  i = i + 1;\n  postMessage(i);\n  setTimeout(\"timedCount()\",500);\n}\n\ntimedCount();<\/pre>\n\n\n\n
La parte importante del c\u00f3digo anterior es el m\u00e9todo postMessage()<\/em><\/strong>, que se utiliza para enviar un mensaje a la p\u00e1gina HTML.<\/p>\n\n\n\n
\n
Nota:<\/strong> Normalmente, los Web Workers no se utilizan para scripts tan simples, sino para tareas m\u00e1s intensivas de CPU.<\/p>\n<\/blockquote>\n\n\n\n
Crear un objeto Web Worker<\/h2>\n\n\n\n
Ahora que tenemos el archivo web worker<\/strong>, debemos llamarlo desde una p\u00e1gina HTML.<\/p>\n\n\n\n
Las siguientes l\u00edneas verifican si el trabajador ya existe, si no, crea un nuevo objeto web worker<\/strong> y ejecuta el c\u00f3digo en \u00abdemo_workers.js<\/em>\u00ab.<\/p>\n\n\n\n
if (typeof(w) == \"undefined\") {\n  w = new Worker(\"demo_workers.js\");\n}<\/pre>\n\n\n\n
Luego podemos enviar y recibir mensajes del Web Worker<\/strong>. Agregue un detector de eventos \u00abonmessage<\/em>\u00bb al Web Worker<\/strong>.<\/p>\n\n\n\n
w.onmessage = function(event){\n  document.getElementById(\"result\").innerHTML = event.data;\n};<\/pre>\n\n\n\n
Cuando el Web Worker<\/strong> publica un mensaje, se ejecuta el c\u00f3digo dentro del detector de eventos. Los datos del Web Worker<\/strong> se almacenan en event.data<\/em><\/strong>.<\/p>\n\n\n\n
Terminar un Web Worker<\/h2>\n\n\n\n
Cuando se crea un objeto Web Worker<\/strong>, continuar\u00e1 escuchando mensajes (incluso despu\u00e9s de que finalice el script externo) hasta que finalice.<\/p>\n\n\n\n
Para terminar un Web Worker<\/strong> y liberar recursos del navegador\/computadora, use el m\u00e9todo terminate()<\/em><\/strong>.<\/p>\n\n\n\n
w.terminate();<\/pre>\n\n\n\n
Web Workers y el DOM<\/h2>\n\n\n\n
Dado que los Web Workers est\u00e1n en archivos externos, no tienen acceso a los siguientes objetos de JavaScript<\/p>\n\n\n\n
    \n
  • El objeto window<\/em><\/strong><\/li>\n\n\n\n
  • El objeto document<\/em><\/strong><\/li>\n\n\n\n
  • El objeto parent<\/em><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Un Web Worker es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la p\u00e1gina. Al ejecutar secuencias…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":67,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-291","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Un Web Worker es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la p\u00e1gina. Al ejecutar secuencias...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=291"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/291\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/291\/revisions\/293"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}