{"id":83555,"date":"2022-10-04T13:06:59","date_gmt":"2022-10-04T11:06:59","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/"},"modified":"2020-09-17T00:07:06","modified_gmt":"2020-09-17T03:07:06","slug":"use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/","title":{"rendered":"Verwenden Sie Web-Worker, um JavaScript \u00fcber den Hauptbrowser-Thread auszuf\u00fchren"},"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\">Contenidos<\/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\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#Subprocesos-con-trabajadores-web\" >Subprocesos con trabajadores web<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#mainjs\" >main.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#workerjs\" >worker.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#mainjs-2\" >main.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#workerjs-2\" >worker.js<\/a><\/li><\/ul><\/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\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#Comlink-hacer-que-los-trabajadores-web-trabajen-menos\" >Comlink: hacer que los trabajadores web trabajen menos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#workerjs-3\" >worker.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#mainjs-3\" >main.js<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#%C2%BFQue-codigo-deberia-transferir-a-un-trabajador-web\" >\u00bfQu\u00e9 c\u00f3digo deber\u00eda transferir a un trabajador web?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#PROXX-un-caso-de-estudio-OMT\" >PROXX: un caso de estudio OMT<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#Implicaciones-de-una-arquitectura-OMT\" >Implicaciones de una arquitectura OMT<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#Considerando-las-compensaciones\" >Considerando las compensaciones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#Una-nota-sobre-herramientas\" >Una nota sobre herramientas<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/use-trabajadores-web-para-ejecutar-javascript-desde-el-hilo-principal-del-navegador\/#Resumiendo\" >Resumiendo<\/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>          Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicaci\u00f3n.<\/p>\n<p>\n          <time>5 de diciembre de 2019<\/time><\/p>\n<\/header>\n<p>En los \u00faltimos 20 a\u00f1os, la web ha evolucionado dr\u00e1sticamente desde documentos est\u00e1ticos con algunos estilos e im\u00e1genes hasta aplicaciones complejas y din\u00e1micas.  Sin embargo, una cosa se ha mantenido pr\u00e1cticamente sin cambios: solo tenemos un hilo por pesta\u00f1a del navegador (con algunas excepciones) para hacer el trabajo de renderizar nuestros sitios y ejecutar nuestro JavaScript.<\/p>\n<p>Como resultado, el hilo principal se ha vuelto incre\u00edblemente sobrecargado de trabajo.  Y a medida que aumenta la complejidad de las aplicaciones web, el hilo principal se convierte en un cuello de botella significativo para el rendimiento.  Para empeorar las cosas, la cantidad de tiempo que lleva ejecutar el c\u00f3digo en el hilo principal para un usuario determinado es <strong>casi completamente impredecible<\/strong><br \/>\nporque las capacidades del dispositivo tienen un efecto enorme en el rendimiento.  Esa imprevisibilidad solo aumentar\u00e1 a medida que los usuarios accedan a la web desde un conjunto cada vez m\u00e1s diverso de dispositivos, desde tel\u00e9fonos con funciones hiperrestringidas hasta m\u00e1quinas insignia de alta potencia y alta frecuencia de actualizaci\u00f3n.<\/p>\n<p>Si queremos que las aplicaciones web sofisticadas cumplan de manera confiable con las pautas de rendimiento como <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rail\">Modelo RAIL<\/a>\u2014Que se basa en datos emp\u00edricos sobre la percepci\u00f3n humana y la psicolog\u00eda \u2014 necesitamos formas de ejecutar nuestro c\u00f3digo <strong>fuera del hilo principal (OMT)<\/strong>.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Si desea saber m\u00e1s sobre el caso de una arquitectura OMT, mire mi charla CDS 2019 a continuaci\u00f3n.<\/p>\n<\/div>\n<p>\n  <iframe loading=\"lazy\" title=\"The main thread is overworked &amp; underpaid (Chrome Dev Summit 2019)\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/7Rrv9qFMWNM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<h2 id=\"threading-with-web-workers\"><span class=\"ez-toc-section\" id=\"Subprocesos-con-trabajadores-web\"><\/span>Subprocesos con trabajadores web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Las plataformas nativas generalmente admiten el trabajo en paralelo al permitirle asignar una funci\u00f3n a un hilo, que se ejecuta en paralelo con el resto de su programa.  Puede acceder a las mismas variables desde ambos hilos, y el acceso a estos recursos compartidos se puede sincronizar con mutex y sem\u00e1foros para evitar condiciones de carrera.<\/p>\n<p>En JavaScript, podemos obtener una funcionalidad similar de los trabajadores web, que existen desde 2007 y son compatibles con los principales navegadores desde 2012. Los trabajadores web se ejecutan en paralelo con el hilo principal, pero a diferencia del hilo nativo, no pueden compartir variables.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>No confunda a los trabajadores web con los trabajadores de servicios o <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Worklet\">worklets<\/a>.  Si bien los nombres son similares, la funcionalidad y los usos son diferentes.<\/p>\n<\/div>\n<p>Para crear un trabajador web, pase un archivo al constructor del trabajador, que comienza a ejecutar ese archivo en un hilo separado:<\/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>Comun\u00edquese con el trabajador web enviando mensajes a trav\u00e9s del<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/postMessage\"><code>postMessage<\/code>  API<\/a>.  Pase el valor del mensaje como par\u00e1metro en el <code>postMessage<\/code> llamar y luego agregar un oyente de eventos de mensaje al trabajador:<\/p>\n<p><!--lint disable no-duplicate-headings-in-section--><\/p>\n<h3 id=\"main.js\"><span class=\"ez-toc-section\" id=\"mainjs\"><\/span><code>main.js<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><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><\/span><br><mark class=\"highlight-line highlight-line-active\">worker<span class=\"token punctuation\">.<\/span><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">40<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"worker.js\"><span class=\"ez-toc-section\" id=\"workerjs\"><\/span><code>worker.js<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\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\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>a<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>data<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>Para enviar un mensaje al hilo principal, use el mismo <code>postMessage<\/code> API en el trabajador web y configure un detector de eventos en el hilo principal:<\/p>\n<h3 id=\"main.js-2\"><span class=\"ez-toc-section\" id=\"mainjs-2\"><\/span><code>main.js<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><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><\/span><br><span class=\"highlight-line\">worker<span class=\"token punctuation\">.<\/span><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">40<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">worker<span class=\"token punctuation\">.<\/span><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\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"worker.js-2\"><span class=\"ez-toc-section\" id=\"workerjs-2\"><\/span><code>worker.js<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><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\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>a<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span>a<span class=\"token operator\">+<\/span>b<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Es cierto que este enfoque es algo limitado.  Hist\u00f3ricamente, los trabajadores web se han utilizado principalmente para sacar una sola pieza de trabajo pesado del hilo principal.  Tratar de manejar m\u00faltiples operaciones con un solo trabajador web se vuelve dif\u00edcil de manejar r\u00e1pidamente: debe codificar no solo los par\u00e1metros, sino tambi\u00e9n la operaci\u00f3n en el mensaje, y debe llevar la contabilidad para hacer coincidir las respuestas con las solicitudes.  Esa complejidad es probablemente la raz\u00f3n por la que los trabajadores web no han sido adoptados m\u00e1s ampliamente.<\/p>\n<p>Pero si pudi\u00e9ramos eliminar algunas de las dificultades de comunicaci\u00f3n entre el hilo principal y los trabajadores web, este modelo podr\u00eda ser ideal para muchos casos de uso.  Y, afortunadamente, \u00a1hay una biblioteca que hace precisamente eso!<\/p>\n<h2 id=\"comlink:-making-web-workers-less-work\"><span class=\"ez-toc-section\" id=\"Comlink-hacer-que-los-trabajadores-web-trabajen-menos\"><\/span>Comlink: hacer que los trabajadores web trabajen menos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/npm.im\/comlink\">Comlink<\/a> es una biblioteca cuyo objetivo es permitirle utilizar trabajadores web sin tener que pensar en los detalles de <code>postMessage<\/code>.  Comlink le permite compartir variables entre los trabajadores web y el hilo principal casi como lenguajes de programaci\u00f3n que soportan de forma nativa el hilo.<\/p>\n<p>Usted configura Comlink import\u00e1ndolo en un trabajador web y definiendo un conjunto de funciones para exponer al hilo principal.  Luego importa Comlink en el hilo principal, envuelve el trabajador y obtiene acceso a las funciones expuestas:<\/p>\n<h3 id=\"worker.js-3\"><span class=\"ez-toc-section\" id=\"workerjs-3\"><\/span><code>worker.js<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\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>expose<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"comlink\"<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> api <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">someMethod<\/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><br><span class=\"token function\">expose<\/span><span class=\"token punctuation\">(<\/span>api<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"main.js-3\"><span class=\"ez-toc-section\" id=\"mainjs-3\"><\/span><code>main.js<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\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>wrap<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"comlink\"<\/span><span class=\"token punctuation\">;<\/span><p><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><span class=\"token keyword\">const<\/span> api <span class=\"token operator\">=<\/span> <span class=\"token function\">wrap<\/span><span class=\"token punctuation\">(<\/span>worker<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>los <code>api<\/code> La variable en el hilo principal se comporta igual que la del trabajador web, excepto que cada funci\u00f3n devuelve una promesa de un valor en lugar del valor en s\u00ed.<\/p>\n<h2 id=\"what-code-should-you-move-to-a-web-worker\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-codigo-deberia-transferir-a-un-trabajador-web\"><\/span>\u00bfQu\u00e9 c\u00f3digo deber\u00eda transferir a un trabajador web? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Los trabajadores web no tienen acceso al DOM y muchas API como <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/USB\">WebUSB<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebRTC_API\">WebRTC<\/a>o<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Audio_API\">Audio Web<\/a>, por lo que no puede colocar partes de su aplicaci\u00f3n que dependan de dicho acceso en un trabajador.  A\u00fan as\u00ed, cada peque\u00f1o fragmento de c\u00f3digo que se traslada a un trabajador genera m\u00e1s espacio para la cabeza en el hilo principal para las cosas que <em>tiene<\/em> estar all\u00ed, como actualizar la interfaz de usuario.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Restringir el acceso a la interfaz de usuario al hilo principal es algo t\u00edpico en otros idiomas.  De hecho, tanto iOS como Android llaman al hilo principal el <em>Hilo de interfaz de usuario<\/em>.<\/p>\n<\/div>\n<p>Un problema para los desarrolladores web es que la mayor\u00eda de las aplicaciones web se basan en un marco de interfaz de usuario como Vue o React para orquestar todo en la aplicaci\u00f3n;  todo es un componente del marco y, por lo tanto, est\u00e1 inherentemente vinculado al DOM.  Eso parecer\u00eda dificultar la migraci\u00f3n a una arquitectura OMT.<\/p>\n<p>Sin embargo, si cambiamos a un modelo en el que las preocupaciones de la interfaz de usuario se separan de otras preocupaciones, como la administraci\u00f3n del estado, los trabajadores web pueden ser bastante \u00fatiles incluso con aplicaciones basadas en marcos.  Ese es exactamente el enfoque adoptado con PROXX.<\/p>\n<h2 id=\"proxx:-an-omt-case-study\"><span class=\"ez-toc-section\" id=\"PROXX-un-caso-de-estudio-OMT\"><\/span>PROXX: un caso de estudio OMT <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de Google Chrome desarroll\u00f3 PROXX como un clon de Buscaminas que cumple<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\">Aplicaci\u00f3n web progresiva<\/a> requisitos, incluido trabajar sin conexi\u00f3n y tener una experiencia de usuario atractiva.  Desafortunadamente, las primeras versiones del juego funcionaron mal en dispositivos restringidos como los tel\u00e9fonos con funciones, lo que llev\u00f3 al equipo a darse cuenta de que el hilo principal era un cuello de botella.<\/p>\n<p>El equipo decidi\u00f3 utilizar trabajadores web para separar el estado visual del juego de su l\u00f3gica:<\/p>\n<ul>\n<li>El hilo principal maneja la representaci\u00f3n de animaciones y transiciones.<\/li>\n<li>Un trabajador web maneja la l\u00f3gica del juego, que es puramente computacional.<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p>Este enfoque es similar al Redux<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/facebook.github.io\/flux\/\">Patr\u00f3n de flujo<\/a>, muchas aplicaciones de Flux pueden migrar con bastante facilidad a una arquitectura OMT.  Echa un vistazo a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dassur.ma\/things\/react-redux-comlink\/\">esta publicaci\u00f3n de blog<\/a><br \/>\npara leer m\u00e1s sobre c\u00f3mo aplicar OMT a una aplicaci\u00f3n Redux.<\/p>\n<\/div>\n<p>OMT tuvo efectos interesantes en el rendimiento del tel\u00e9fono con funciones de PROXX.  En la versi\u00f3n que no es OMT, la interfaz de usuario se congela durante seis segundos despu\u00e9s de que el usuario interact\u00faa con ella.  No hay comentarios y el usuario tiene que esperar los seis segundos completos antes de poder hacer otra cosa.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" muted=\"\" class=\"w-screenshot\" style=\"max-width: 400px;\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/off-main-thread\/proxx-nonomt.webm\" type=\"video\/webm; codecs=vp8\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/off-main-thread\/proxx-nonomt.mp4\" type=\"video\/mp4; codecs=h264\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n<p>    El tiempo de respuesta de la IU en el <strong>no OMT<\/strong> versi\u00f3n de PROXX.<br \/>\n  <\/figcaption><\/figure>\n<p>En la versi\u00f3n OMT, sin embargo, el juego toma <em>doce<\/em> segundos para completar una actualizaci\u00f3n de la interfaz de usuario.  Si bien eso parece una p\u00e9rdida de rendimiento, en realidad conduce a una mayor retroalimentaci\u00f3n para el usuario.  La ralentizaci\u00f3n se produce porque la aplicaci\u00f3n env\u00eda m\u00e1s marcos que la versi\u00f3n que no es OMT, que no env\u00eda ning\u00fan marco.  Por lo tanto, el usuario sabe que algo est\u00e1 sucediendo y puede continuar jugando a medida que se actualiza la interfaz de usuario, lo que hace que el juego se sienta considerablemente mejor.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" muted=\"\" class=\"w-screenshot\" style=\"max-width: 400px;\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/off-main-thread\/proxx-omt.webm\" type=\"video\/webm; codecs=vp8\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/off-main-thread\/proxx-omt.mp4\" type=\"video\/mp4; codecs=h264\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n<p>    El tiempo de respuesta de la IU en el <strong>OMT<\/strong> versi\u00f3n de PROXX.<br \/>\n  <\/figcaption><\/figure>\n<p>Esta es una compensaci\u00f3n consciente: brindamos a los usuarios de dispositivos restringidos una experiencia que <em>siente<\/em> mejor sin penalizar a los usuarios de dispositivos de gama alta.<\/p>\n<h2 id=\"implications-of-an-omt-architecture\"><span class=\"ez-toc-section\" id=\"Implicaciones-de-una-arquitectura-OMT\"><\/span>Implicaciones de una arquitectura OMT <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Como muestra el ejemplo de PROXX, OMT hace que su aplicaci\u00f3n se ejecute de manera confiable en una gama m\u00e1s amplia de dispositivos, pero no hace que su aplicaci\u00f3n sea m\u00e1s r\u00e1pida:<\/p>\n<ul>\n<li>Simplemente est\u00e1 moviendo el trabajo del hilo principal, no reduciendo el trabajo.<\/li>\n<li>La sobrecarga de comunicaci\u00f3n adicional entre el trabajador web y el hilo principal a veces puede hacer que las cosas sean un poco m\u00e1s lentas.<\/li>\n<\/ul>\n<h3 id=\"considering-the-tradeoffs\"><span class=\"ez-toc-section\" id=\"Considerando-las-compensaciones\"><\/span>Considerando las compensaciones <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dado que el hilo principal es libre de procesar las interacciones del usuario, como desplazarse mientras se ejecuta JavaScript, hay menos fotogramas descartados, aunque el tiempo de espera total puede ser ligeramente m\u00e1s largo.  Hacer que el usuario espere un poco es preferible a descartar un fotograma porque el margen de error es menor para los fotogramas descartados: el descarte de un fotograma ocurre en milisegundos, mientras <em>cientos<\/em> de milisegundos antes de que un usuario perciba el tiempo de espera.<\/p>\n<p>Debido a la imprevisibilidad del rendimiento en todos los dispositivos, el objetivo de la arquitectura OMT se trata realmente de <strong>reduciendo el riesgo<\/strong>\u2014Hacer que su aplicaci\u00f3n sea m\u00e1s robusta frente a condiciones de tiempo de ejecuci\u00f3n altamente variables\u2014 no sobre los beneficios de rendimiento de la paralelizaci\u00f3n.  El aumento de la capacidad de recuperaci\u00f3n y las mejoras de UX valen la pena cualquier peque\u00f1a compensaci\u00f3n en la velocidad.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>A los desarrolladores a veces les preocupa el costo de copiar objetos complejos en el hilo principal y los trabajadores web.  Hay m\u00e1s detalles en la charla, pero, en general, no debe romper su presupuesto de rendimiento si la representaci\u00f3n JSON en cadena de su objeto es inferior a 10 KB.  Si necesita copiar objetos m\u00e1s grandes, considere usar<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/ArrayBuffer\">ArrayBuffer<\/a><br \/>\no <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webassembly.org\/\">WebAssembly<\/a>.  Puede leer m\u00e1s sobre este problema en<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dassur.ma\/things\/is-postmessage-slow\">esta publicaci\u00f3n de blog sobre <code>postMessage<\/code> actuaci\u00f3n<\/a>.<\/p>\n<\/div>\n<h3 id=\"a-note-about-tooling\"><span class=\"ez-toc-section\" id=\"Una-nota-sobre-herramientas\"><\/span>Una nota sobre herramientas <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Los trabajadores web a\u00fan no son convencionales, por lo que la mayor\u00eda de las herramientas de m\u00f3dulos, como <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/\">WebPack<\/a><br \/>\ny <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/rollup\/rollup\">Enrollar<\/a>\u2014No los apoye desde el primer momento.  (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/parceljs.org\/\">Paquete o empaquetar<\/a> \u00a1aunque s\u00ed!) Afortunadamente, hay complementos para hacer que los trabajadores web, bueno, <em>trabajo<\/em> con WebPack y Rollup:<\/p>\n<h2 id=\"summing-up\"><span class=\"ez-toc-section\" id=\"Resumiendo\"><\/span>Resumiendo <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para asegurarnos de que nuestras aplicaciones sean tan confiables y accesibles como sea posible, especialmente en un mercado cada vez m\u00e1s globalizado, necesitamos admitir dispositivos restringidos; es la forma en que la mayor\u00eda de los usuarios acceden a la web a nivel mundial.  OMT ofrece una forma prometedora de aumentar el rendimiento en dichos dispositivos sin afectar negativamente a los usuarios de dispositivos de gama alta.<\/p>\n<p>Adem\u00e1s, OMT tiene beneficios secundarios:<\/p>\n<p>Los trabajadores web no tienen por qu\u00e9 dar miedo.  Herramientas como Comlink eliminan el trabajo de los trabajadores y los convierten en una opci\u00f3n viable para una amplia gama de aplicaciones web.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicaci\u00f3n. 5 de diciembre de 2019 En los \u00faltimos 20 a\u00f1os, la&#8230;<\/p>","protected":false},"author":1,"featured_media":82208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83555","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"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>Use trabajadores web para ejecutar JavaScript desde el hilo principal del navegador - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicaci\u00f3n. 5 de diciembre\" \/>\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\/de\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use trabajadores web para ejecutar JavaScript desde el hilo principal del navegador\" \/>\n<meta property=\"og:description\" content=\"Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicaci\u00f3n. 5 de diciembre\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-04T11:06:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Use trabajadores web para ejecutar JavaScript desde el hilo principal del navegador\",\"datePublished\":\"2022-10-04T11:06:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/\"},\"wordCount\":1855,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/\",\"name\":\"Use trabajadores web para ejecutar JavaScript desde el hilo principal del navegador - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"datePublished\":\"2022-10-04T11:06:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicaci\u00f3n. 5 de diciembre\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/social-6815535.png\",\"width\":1200,\"height\":1200,\"caption\":\"social-6815535-9949209-png\"},{\"@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\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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":"Verwenden Sie Webworker, um JavaScript aus dem Hauptbrowser-Thread \u2013 R Marketing Digital \u2013 auszuf\u00fchren","description":"Eine Off-the-Thread-Architektur kann die Zuverl\u00e4ssigkeit und Benutzererfahrung Ihrer Anwendung erheblich verbessern. 5. Dezember","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\/de\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/","og_locale":"de_DE","og_type":"article","og_title":"Use trabajadores web para ejecutar JavaScript desde el hilo principal del navegador","og_description":"Una arquitectura fuera del hilo principal puede mejorar significativamente la confiabilidad y la experiencia del usuario de su aplicaci\u00f3n. 5 de diciembre","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-04T11:06:59+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Use trabajadores web para ejecutar JavaScript desde el hilo principal del navegador","datePublished":"2022-10-04T11:06:59+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/"},"wordCount":1855,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/","name":"Verwenden Sie Webworker, um JavaScript aus dem Hauptbrowser-Thread \u2013 R Marketing Digital \u2013 auszuf\u00fchren","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","datePublished":"2022-10-04T11:06:59+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Eine Off-the-Thread-Architektur kann die Zuverl\u00e4ssigkeit und Benutzererfahrung Ihrer Anwendung erheblich verbessern. 5. Dezember","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/utiliser-web-workers-pour-executer-javascript-depuis-le-fil-de-navigateur-principal\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/social-6815535.png","width":1200,"height":1200,"caption":"social-6815535-9949209-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | 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":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@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\/de\/wp-json\/wp\/v2\/posts\/83555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83555"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83555\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/82208"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}