Hispanopedia Wiki
Articulo de referencia

Trabajador web

Un web worker , según la definición del Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG), es un script JavaScript ej...

Hispanopedia WikiContenido en espanolLectura gratuita

Un web worker , según la definición del Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG), es un script JavaScript ejecutado desde una página HTML que se ejecuta en segundo plano , independientemente de otros scripts que también se hayan ejecutado desde la misma página HTML. [ 1 ] Los web workers suelen aprovechar mejor las CPU multinúcleo . [ 2 ]

El W3C y el WHATWG conciben los web workers como scripts de larga duración que no se interrumpen por scripts que responden a clics u otras interacciones del usuario. Evitar que estos workers se vean interrumpidos por las actividades del usuario debería permitir que las páginas web sigan respondiendo mientras ejecutan tareas largas en segundo plano.

La especificación del web worker forma parte del HTML Living Standard. [ 1 ]

Descripción general

Tal como lo concibió WHATWG, los web workers son relativamente pesados ​​y no están diseñados para usarse en grandes cantidades. Se espera que tengan una larga vida útil, con un alto costo de rendimiento inicial y un alto costo de memoria por instancia. [ 1 ]

Los web workers se ejecutan fuera del contexto de los scripts de un documento HTML. Por lo tanto, aunque no tienen acceso al DOM , pueden facilitar la ejecución concurrente de programas JavaScript.

Características

Los web workers interactúan con el documento principal mediante el paso de mensajes . El siguiente código crea un Worker que ejecutará el JavaScript del archivo especificado.

var worker = new Worker ( "worker_script.js" );

Para enviar un mensaje al trabajador, postMessagese utiliza el método del objeto trabajador como se muestra a continuación.

trabajador.postMessage ( " ¡ Hola Mundo!" );

La onmessagepropiedad utiliza un controlador de eventos para recuperar información de un trabajador.

trabajador.onmessage = function ( event ) { alert ( "Mensaje recibido " + event.data ) ; doSomething ( ); } function doSomething ( ) { // hacer trabajo trabajador.postMessage ( " ¡ Trabajo hecho!" ) ; }trabajador.terminar ( ) ;

Una vez que se termina la ejecución de un trabajador, este queda fuera del ámbito de aplicación y la variable que lo referencia pasa a ser indefinida; en ese momento, si es necesario, hay que crear un nuevo trabajador.

Ejemplo

El uso más sencillo de los web workers consiste en realizar una tarea computacionalmente costosa sin interrumpir la interfaz de usuario.

En este ejemplo, el documento principal inicia un proceso web para calcular números primos y muestra progresivamente el número primo encontrado más recientemente.

La página principal es la siguiente:

< ! DOCTYPE html > <html> <head> <title> Ejemplo de trabajador : Computación de un núcleo </title> </head> <body> <p> El número primo más alto descubierto hasta ahora es : < output id = " result " > </output> </p> <script> var worker = new Worker ( ' worker.js ' ) ; worker.onmessage = function ( event ) { document.getElementById ( ' result ' ) . textContent = event.data ; } ; </script> </body> </html>​

La Worker()llamada al constructor crea un web worker y devuelve un workerobjeto que lo representa, el cual se utiliza para comunicarse con él. onmessageEl controlador de eventos de ese objeto permite que el código reciba mensajes del web worker.

El propio Web Worker es el siguiente:

var n = 1 ; var end_value = 10 ** 7 ; búsqueda : mientras ( n <= end_value ) { n ++ ; para ( var i = 2 ; i <= Math.sqrt ( n ); i ++ ) si ( n % i == 0 ) continuar búsqueda ; // ¡ Encontrado un primo! postMessage ( n ); }

Para enviar un mensaje de vuelta a la página, postMessage()se utiliza el método para publicar un mensaje cuando se encuentra un número primo. [ 1 ]

Apoyo

Si el navegador admite web workers, la propiedad Worker estará disponible en el objeto global window. [ 3 ] La propiedad Worker será indefinida si el navegador no la admite.

El siguiente código de ejemplo comprueba la compatibilidad con web workers en un navegador.

function browserSupportsWebWorkers () { return typeof window . Worker === "function" ; }

Actualmente, Chrome , Opera , Edge , Internet Explorer (versión 10), Mozilla Firefox y Safari son compatibles con los web workers . [ 4 ] [ 5 ] [ 6 ] Mobile Safari para iOS es compatible con los web workers desde iOS 5. El navegador de Android fue compatible con los web workers por primera vez en Android 2.1, pero la compatibilidad se eliminó en las versiones de Android 2.2 a 4.3 antes de ser restaurada en Android 4.4. [ 7 ] [ 8 ]

Véase también

Referencias

  1. 1 2 3 4 Web Workers , WHATWG , consultado el 2 de enero de 2023
  2. ↑ "HTML Living Standard" . Html.spec.whatwg.org . 30 de enero de 2017. Consultado el 31 de enero de 2017 .
  3. ↑ "HTML5 en funcionamiento" Mark Pilgrim. O'Reilly/Google Press. Agosto de 2010
  4. ↑ "Introducción a HTML5", Lawson, B. y Sharp, R., 2011.
  5. ↑ "HTML5 y CSS3" Brian P. Hogan. The Pragmatic Programmers, LLC 2010.
  6. ↑ "¿Puedo usar... Web Worker?" . caniuse.com . Consultado el 30 de septiembre de 2019 .
  7. ↑ "Enfoque: Evaluación comparativa de Android 2.1 con Web Workers - Isogenic Engine" . Archivado del original el 19 de octubre de 2013. Consultado el 10 de julio de 2011 .
  8. ↑ "¿Puedo usar... Tablas de soporte para HTML5, CSS3, etc." . caniuse.com . Consultado el 10 de junio de 2017 .
  • Trabajadores web – W3C
  • Trabajadores web – WHATWG
  • Uso de Web Workers – Red de desarrolladores de Mozilla