stringtranslate.com

Trabajador web

Un trabajador web , según lo define el Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG), es un script de JavaScript ejecutado desde una página HTML que se ejecuta en segundo plano , independientemente de los scripts que también puedan haberse ejecutado desde la misma página HTML. [1] Los trabajadores web a menudo pueden utilizar CPU de múltiples núcleos de manera más efectiva. [2]

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

La especificación del trabajador web es parte del HTML Living Standard. [1]

Descripción general

Tal como lo prevé WHATWG, los trabajadores web son relativamente pesados ​​y no están pensados ​​para ser utilizados en grandes cantidades. Se espera que tengan una larga vida útil, un alto costo de rendimiento inicial y un alto costo de memoria por instancia. [1]

Los trabajadores web se ejecutan fuera del contexto de los scripts de un documento HTML. Por lo tanto, si bien no tienen acceso al DOM , pueden facilitar la ejecución simultánea de programas JavaScript.

Características

Los trabajadores web interactúan con el documento principal mediante el paso de mensajes . El código siguiente crea un trabajador que ejecutará el código JavaScript en el archivo indicado.

var trabajador = nuevo Trabajador ( "trabajador_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.

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

Una vez que se termina un trabajador, queda fuera del alcance y la variable que lo hace referencia deja de estar definida; en este punto, se debe crear un nuevo trabajador si es necesario.

Ejemplo

El uso más simple de los trabajadores web es realizar una tarea computacionalmente costosa sin interrumpir la interfaz del usuario.

En este ejemplo, el documento principal genera un trabajador 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 trabajador web y devuelve un workerobjeto que representa a ese trabajador web, que se utiliza para comunicarse con él. onmessageEl controlador de eventos de ese objeto permite que el código reciba mensajes del trabajador web.

El Web Worker en sí es el siguiente:

var n = 1 ; var valor_final = 10 ** 7 ; buscar : while ( n <= valor_final ) { n ++ ; for ( var i = 2 ; i <= Math . sqrt ( n ); i ++ ) if ( n % i == 0 ) continuar búsqueda ; // ¡Se encontró 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 trabajadores web, habrá una propiedad Worker disponible en el objeto de ventana global. [3] La propiedad Worker no estará definida si el navegador no la admite.

El siguiente código de ejemplo verifica la compatibilidad del trabajador web en un navegador

función browserSupportsWebWorkers () { return typeof window.Worker === " función " ; }       

Los trabajadores web son compatibles actualmente con Chrome , Opera , Edge , Internet Explorer (versión 10), Mozilla Firefox y Safari . [4] [5] [6] Safari móvil para iOS ha sido compatible con los trabajadores web desde iOS 5. El navegador Android fue compatible por primera vez con los trabajadores web en Android 2.1, pero el soporte se eliminó en las versiones de Android 2.2 a 4.3 antes de ser restaurado en Android 4.4. [7] [8]

Referencias

  1. ^ abcd 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. ^ "Spotlight: Benchmarking de Android 2.1 con Web Workers - Isogenic Engine". Archivado desde el 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 .

Enlaces externos