{"id":84074,"date":"2022-09-11T10:53:14","date_gmt":"2022-09-11T08:53:14","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/"},"modified":"2020-09-17T05:59:34","modified_gmt":"2020-09-17T08:59:34","slug":"enhebrar-la-web-con-trabajadores-del-modulo","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/","title":{"rendered":"Threading the web with module workers"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/#Historia-trabajadores-clasicos\" >Historia: trabajadores cl\u00e1sicos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/#Ingresar-trabajadores-del-modulo\" >Ingresar trabajadores del m\u00f3dulo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/#Precargar-trabajadores-con-modulepreload\" >Precargar trabajadores con modulepreload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/#%C2%BFQue-pasa-con-los-trabajadores-compartidos\" >\u00bfQu\u00e9 pasa con los trabajadores compartidos?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/#%C2%BFQue-pasa-con-el-trabajador-de-servicios\" >\u00bfQu\u00e9 pasa con el trabajador de servicios?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/enhebrar-la-web-con-trabajadores-del-modulo\/#Recursos-adicionales-y-lectura-adicional\" >Recursos adicionales y lectura adicional<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web.<\/p>\n<p>\n          <time>17 de diciembre de 2019<\/time><\/p>\n<\/header>\n<p>JavaScript es de un solo subproceso, lo que significa que solo puede realizar una operaci\u00f3n a la vez.  Esto es intuitivo y funciona bien para muchos casos en la web, pero puede resultar problem\u00e1tico cuando necesitamos realizar tareas pesadas como procesamiento de datos, an\u00e1lisis sint\u00e1ctico, c\u00e1lculo o an\u00e1lisis.  A medida que se entregan aplicaciones cada vez m\u00e1s complejas en la web, existe una mayor necesidad de procesamiento de subprocesos m\u00faltiples.<\/p>\n<p>En la plataforma web, la primitiva principal para el enhebrado y el paralelismo es el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\">API de trabajadores web<\/a>.  Los trabajadores son una abstracci\u00f3n ligera adem\u00e1s de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Thread_%28computing%29\">subprocesos del sistema operativo<\/a> que exponen un mensaje que pasa API para la comunicaci\u00f3n entre subprocesos.  Esto puede ser inmensamente \u00fatil cuando se realizan c\u00e1lculos costosos o se opera en grandes conjuntos de datos, lo que permite que el hilo principal se ejecute sin problemas mientras se realizan las costosas operaciones en uno o m\u00e1s hilos en segundo plano.<\/p>\n<p>Aqu\u00ed hay un ejemplo t\u00edpico de uso de trabajador, donde un script de trabajador escucha mensajes del hilo principal y responde enviando mensajes propios:<\/p>\n<p class=\"w-label\">page.js:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'worker.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>worker<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">and<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>and<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>worker<span class=\"token punctuation\">.<\/span><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'hello'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p class=\"w-label\">worker.js:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'message'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">and<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>and<span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">===<\/span> <span class=\"token string\">'hello'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'world'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La API de Web Worker ha estado disponible en la mayor\u00eda de los navegadores durante m\u00e1s de diez a\u00f1os.  Si bien eso significa que los trabajadores tienen un excelente soporte de navegador y est\u00e1n bien optimizados, tambi\u00e9n significa que son anteriores a los m\u00f3dulos de JavaScript.  Dado que no exist\u00eda un sistema de m\u00f3dulos cuando se dise\u00f1aron los trabajadores, la API para cargar c\u00f3digo en un trabajador y componer scripts se ha mantenido similar a los enfoques de carga de scripts s\u00edncronos comunes en 2009.<\/p>\n<h2 id=\"history:-classic-workers\"><span class=\"ez-toc-section\" id=\"Historia-trabajadores-clasicos\"><\/span>Historia: trabajadores cl\u00e1sicos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El constructor Worker toma un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/webappapis.html#classic-script\">gui\u00f3n cl\u00e1sico<\/a> URL, que es relativa a la URL del documento.  Inmediatamente devuelve una referencia a la nueva instancia de trabajador, que expone una interfaz de mensajer\u00eda, as\u00ed como una <code>terminate()<\/code> m\u00e9todo que detiene y destruye inmediatamente al trabajador.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'worker.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>A <code>importScripts ()<\/code> La funci\u00f3n est\u00e1 disponible dentro de los trabajadores web para cargar c\u00f3digo adicional, pero detiene la ejecuci\u00f3n del trabajador para buscar y evaluar cada script.  Tambi\u00e9n ejecuta scripts en el \u00e1mbito global como un cl\u00e1sico. <code><\/code> , lo que significa que las variables de un script pueden ser sobrescritas por las variables de otro.<\/p>\n<p class=\"w-label\">worker.js:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token function\">importScripts<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'greet.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'message'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">and<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">sayHello<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p class=\"w-label\">saludar.js:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">function<\/span> <span class=\"token function\">sayHello<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token string\">'world'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Por esta raz\u00f3n, los trabajadores web hist\u00f3ricamente han impuesto un efecto descomunal en la arquitectura de una aplicaci\u00f3n.  Los desarrolladores han tenido que crear herramientas inteligentes y soluciones para hacer posible el uso de trabajadores web sin renunciar a las pr\u00e1cticas de desarrollo modernas.  Como ejemplo, los paquetes como webpack incorporan una implementaci\u00f3n de cargador de m\u00f3dulo peque\u00f1o en el c\u00f3digo generado que usa <code>importScripts ()<\/code><br \/>\npara la carga de c\u00f3digo, pero envuelve los m\u00f3dulos en funciones para evitar colisiones de variables y simular importaciones y exportaciones de dependencias.<\/p>\n<h2 id=\"enter-module-workers\"><span class=\"ez-toc-section\" id=\"Ingresar-trabajadores-del-modulo\"><\/span>Ingresar trabajadores del m\u00f3dulo <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Un nuevo modo para los trabajadores web con los beneficios de ergonom\u00eda y rendimiento de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/v8.dev\/features\/modules\">M\u00f3dulos JavaScript<\/a> se env\u00eda en Chrome 80, denominados trabajadores del m\u00f3dulo.  los<br \/>\n<code>Worker<\/code> constructor ahora acepta un nuevo <code>{type:\"module\"}<\/code> opci\u00f3n, que cambia la carga y ejecuci\u00f3n del script para que coincida <code><\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'worker.js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br>type<span class=\"token operator\">:<\/span> <span class=\"token string\">'module'<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Dado que los trabajadores de m\u00f3dulo son m\u00f3dulos de JavaScript est\u00e1ndar, pueden utilizar declaraciones de importaci\u00f3n y exportaci\u00f3n.  Al igual que con todos los m\u00f3dulos de JavaScript, las dependencias solo se ejecutan una vez en un contexto dado (hilo principal, trabajador, etc.), y todas las importaciones futuras hacen referencia a la instancia del m\u00f3dulo ya ejecutada.  Los navegadores tambi\u00e9n optimizan la carga y ejecuci\u00f3n de m\u00f3dulos JavaScript.  Las dependencias de un m\u00f3dulo se pueden cargar antes de que se ejecute el m\u00f3dulo, lo que permite cargar \u00e1rboles de m\u00f3dulos completos en paralelo.  La carga de m\u00f3dulos tambi\u00e9n almacena en cach\u00e9 el c\u00f3digo analizado, lo que significa que los m\u00f3dulos que se utilizan en el hilo principal y en un trabajador solo necesitan analizarse una vez.<\/p>\n<p>Pasar a m\u00f3dulos de JavaScript tambi\u00e9n permite el uso de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/v8.dev\/features\/dynamic-import\">importaci\u00f3n din\u00e1mica<\/a> para c\u00f3digo de carga diferida sin bloquear la ejecuci\u00f3n del trabajador.  La importaci\u00f3n din\u00e1mica es mucho m\u00e1s expl\u00edcita que usar <code>importScripts ()<\/code> para cargar dependencias, ya que las exportaciones del m\u00f3dulo importado se devuelven en lugar de depender de variables globales.<\/p>\n<p class=\"w-label\">worker.js:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> sayHello <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'.\/greet.js'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'message'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">and<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">sayHello<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p class=\"w-label\">saludar.js:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import<\/span> greetings <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'.\/data.js'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">sayHello<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> greetings<span class=\"token punctuation\">.<\/span>hello<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Para garantizar un gran rendimiento, el viejo <code>importScripts ()<\/code> El m\u00e9todo no est\u00e1 disponible en los trabajadores del m\u00f3dulo.  Cambiar trabajadores para usar m\u00f3dulos de JavaScript significa que todo el c\u00f3digo se carga en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\">Modo estricto<\/a>.  Otro cambio notable es que el valor de <code>Este<\/code> en el \u00e1mbito de nivel superior de un m\u00f3dulo JavaScript es<br \/>\n<code>undefined<\/code>, mientras que en los trabajadores cl\u00e1sicos el valor es el alcance global del trabajador.  Afortunadamente, siempre ha habido una <code>self<\/code> global que proporciona una referencia al alcance global.  Est\u00e1 disponible en todo tipo de trabajadores, incluidos los trabajadores de servicios, as\u00ed como en el DOM.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Los trabajadores del m\u00f3dulo tambi\u00e9n eliminan la compatibilidad con comentarios de estilo HTML.  \u00bfSab\u00eda que puede utilizar comentarios HTML en scripts de trabajadores web?<\/p>\n<\/div>\n<h2 id=\"preload-workers-with-modulepreload\"><span class=\"ez-toc-section\" id=\"Precargar-trabajadores-con-modulepreload\"><\/span>Precargar trabajadores con <code>modulepreload<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Una mejora sustancial del rendimiento que viene con los trabajadores del m\u00f3dulo es la capacidad de precargar trabajadores y sus dependencias.  Con los trabajadores del m\u00f3dulo, los scripts se cargan y ejecutan como m\u00f3dulos est\u00e1ndar de JavaScript, lo que significa que pueden precargarse e incluso pre-analizarse usando <code>modulepreload<\/code>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>modulepreload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>worker.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><span class=\"token language-javascript\"><br><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'load'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'worker.js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> type<span class=\"token operator\">:<\/span> <span class=\"token string\">'module'<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Los m\u00f3dulos precargados tambi\u00e9n pueden ser utilizados tanto por el hilo principal como por los trabajadores del m\u00f3dulo.  Esto es \u00fatil para m\u00f3dulos que se importan en ambos contextos, o en casos en los que no es posible saber de antemano si un m\u00f3dulo se utilizar\u00e1 en el hilo principal o en un trabajador.<\/p>\n<p>Anteriormente, las opciones disponibles para precargar scripts de trabajadores web eran limitadas y no necesariamente confiables.  Los trabajadores cl\u00e1sicos ten\u00edan su propio tipo de recurso \u00abtrabajador\u00bb para la precarga, pero no se implementaron navegadores <code>&lt;link rel=\"preload\" as=\"worker\"&gt;<\/code>.  Como resultado, la t\u00e9cnica principal disponible para precargar los trabajadores web era utilizar <code><\/code>, que se bas\u00f3 completamente en la cach\u00e9 HTTP.  Cuando se usa en combinaci\u00f3n con los encabezados de almacenamiento en cach\u00e9 correctos, esto hizo posible evitar que la instanciaci\u00f3n del trabajador tuviera que esperar para descargar el script del trabajador.  Sin embargo, a diferencia de<br \/>\n<code>modulepreload<\/code> esta t\u00e9cnica no admit\u00eda la carga previa de dependencias ni el an\u00e1lisis previo.<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/worker-preloading?attributionHidden=true&amp;sidebarCollapsed=true&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"worker-preloading on Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"what-about-shared-workers\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-pasa-con-los-trabajadores-compartidos\"><\/span>\u00bfQu\u00e9 pasa con los trabajadores compartidos? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/SharedWorker\/SharedWorker\">Trabajadores compartidos<\/a> se han actualizado con soporte para m\u00f3dulos JavaScript a partir de Chrome 83. Al igual que los trabajadores dedicados, la construcci\u00f3n de un trabajador compartido con el <code>{type:\"module\"}<\/code> La opci\u00f3n ahora carga el script de trabajo como un m\u00f3dulo en lugar de un script cl\u00e1sico:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SharedWorker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/worker.js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br>type<span class=\"token operator\">:<\/span> <span class=\"token string\">'module'<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Antes de la compatibilidad con los m\u00f3dulos de JavaScript, <code>SharedWorker()<\/code> El constructor esperaba solo una URL y una opci\u00f3n <code>yam<\/code> argumento.  Esto seguir\u00e1 funcionando para el uso cl\u00e1sico de trabajadores compartidos;  sin embargo, la creaci\u00f3n de m\u00f3dulos de trabajadores compartidos requiere el uso de la nueva <code>options<\/code> argumento.  los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/workers.html#shared-workers-and-the-sharedworker-interface\">Opciones Disponibles<\/a><br \/>\nson los mismos que los de un trabajador dedicado, incluido el <code>yam<\/code> opci\u00f3n que reemplaza a la anterior <code>yam<\/code> argumento.<\/p>\n<h2 id=\"what-about-service-worker\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-pasa-con-el-trabajador-de-servicios\"><\/span>\u00bfQu\u00e9 pasa con el trabajador de servicios? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La especificaci\u00f3n del trabajador de servicio <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/ServiceWorker\/#service-worker-concept\">ya ha sido actualizado<\/a> para admitir la aceptaci\u00f3n de un m\u00f3dulo JavaScript como punto de entrada, utilizando el mismo <code>{type:\"module\"}<\/code> opci\u00f3n como trabajadores del m\u00f3dulo, sin embargo, este cambio a\u00fan no se ha implementado en los navegadores.  Una vez que eso suceda, ser\u00e1 posible crear una instancia de un trabajador de servicio usando un m\u00f3dulo de JavaScript usando el siguiente c\u00f3digo:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">navigator<span class=\"token punctuation\">.<\/span>serviceWorker<span class=\"token punctuation\">.<\/span><span class=\"token function\">register<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/sw.js'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br>type<span class=\"token operator\">:<\/span> <span class=\"token string\">'module'<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Ahora que se actualiz\u00f3 la especificaci\u00f3n, los navegadores est\u00e1n comenzando a implementar el nuevo comportamiento.  Esto lleva tiempo porque existen algunas complicaciones adicionales asociadas con la incorporaci\u00f3n de m\u00f3dulos de JavaScript al trabajador del servicio.  El registro del trabajador de servicio debe <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chromestatus.com\/feature\/6533131347689472\">comparar los scripts importados con sus versiones anteriores en cach\u00e9<\/a> al determinar si se debe activar una actualizaci\u00f3n, y esto debe implementarse para los m\u00f3dulos de JavaScript cuando se utilizan para los trabajadores del servicio.  Adem\u00e1s, los trabajadores de servicios deben poder <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chromestatus.com\/feature\/5897293530136576\">omitir el cach\u00e9<\/a> para scripts en ciertos casos al buscar actualizaciones.<\/p>\n<h2 id=\"additional-resources-and-further-reading\"><span class=\"ez-toc-section\" id=\"Recursos-adicionales-y-lectura-adicional\"><\/span>Recursos adicionales y lectura adicional <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019 JavaScript es de&#8230;<\/p>","protected":false},"author":1,"featured_media":84075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[1434],"class_list":["post-84074","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev","tag-chrome"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Enhebrar la web con trabajadores del m\u00f3dulo - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/thread-the-web-avec-modules-workers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhebrar la web con trabajadores del m\u00f3dulo\" \/>\n<meta property=\"og:description\" content=\"Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/thread-the-web-avec-modules-workers\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-11T08:53:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7793149.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Enhebrar la web con trabajadores del m\u00f3dulo\",\"datePublished\":\"2022-09-11T08:53:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/\"},\"wordCount\":1472,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7793149.jpg\",\"keywords\":[\"Chrome\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/\",\"name\":\"Enhebrar la web con trabajadores del m\u00f3dulo - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7793149.jpg\",\"datePublished\":\"2022-09-11T08:53:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/thread-the-web-avec-modules-workers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7793149.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7793149.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-7793149-7964686-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Enhebrar la web con trabajadores del m\u00f3dulo - R Marketing Digital","description":"Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/thread-the-web-avec-modules-workers\/","og_locale":"en_US","og_type":"article","og_title":"Enhebrar la web con trabajadores del m\u00f3dulo","og_description":"Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/thread-the-web-avec-modules-workers\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-11T08:53:14+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7793149.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Enhebrar la web con trabajadores del m\u00f3dulo","datePublished":"2022-09-11T08:53:14+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/"},"wordCount":1472,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7793149.jpg","keywords":["Chrome"],"articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/","name":"Enhebrar la web con trabajadores del m\u00f3dulo - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7793149.jpg","datePublished":"2022-09-11T08:53:14+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Ahora es m\u00e1s f\u00e1cil mover el trabajo pesado a subprocesos en segundo plano con los m\u00f3dulos de JavaScript en los trabajadores web. 17 de diciembre de 2019","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/thread-the-web-avec-modules-workers\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7793149.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7793149.jpg","width":1200,"height":360,"caption":"hero-7793149-7964686-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/84074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=84074"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/84074\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/84075"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=84074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=84074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=84074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}