Un trabajador web , según lo definido por el 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 los scripts que también pueden haber sido ejecutado desde la misma página HTML. [1] trabajadores Web son a menudo capaces de utilizar múltiples núcleos CPU de manera más eficaz. [2]
El W3C y el WHATWG visualizan a los trabajadores web como scripts de larga duración que no son interrumpidos por scripts que responden a los clics u otras interacciones del usuario. Evitar que estos trabajadores sean interrumpidos por las actividades de los usuarios debería permitir que las páginas web sigan respondiendo al mismo tiempo que ejecutan tareas largas en segundo plano.
El uso más simple de los trabajadores es realizar una tarea computacionalmente costosa sin interrumpir la interfaz de usuario.
La especificación del trabajador web es parte de HTML Living Standard. [1]
Descripción general
Según lo previsto por WHATWG, los trabajadores web son relativamente pesados y no están destinados a ser utilizados en grandes cantidades. Se espera que sean de larga duración, con 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. En consecuencia, aunque no tienen acceso al DOM , pueden facilitar la ejecución concurrente de programas JavaScript.
Características
Los trabajadores web interactúan con el documento principal a través del paso de mensajes . El siguiente código crea un Worker que ejecutará JavaScript en el archivo dado.
var worker = new Worker ( "worker_script.js" );
Para enviar un mensaje al trabajador, postMessage
se utiliza el método del objeto trabajador como se muestra a continuación.
trabajador . postMessage ( "¡Hola mundo!" );
La onmessage
propiedad utiliza un controlador de eventos para recuperar información de un trabajador.
trabajador . onmessage = función ( evento ) { alerta ( "Mensaje recibido" + evento . datos ); hacer algo (); }function doSomething () { // trabaja trabajador . postMessage ( "¡Trabajo hecho!" ); }trabajador . terminar ();
Una vez que un trabajador es despedido, queda fuera de alcance y la variable que hace referencia a él se vuelve indefinida; 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 de 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:
< html > < head > < title > Ejemplo de trabajador: cálculo de un núcleo title > head > < body > < p > El número primo más alto descubierto hasta ahora es: < output id = "resultado " > output > p > < script > var worker = new Worker ( 'worker.js' ); trabajador . onmessage = function ( evento ) { document . getElementById ( 'resultado' ). textContent = evento . datos ; }; script > body > html >
La Worker()
llamada al constructor crea un trabajador web y devuelve un worker
objeto que representa a ese trabajador web, que se utiliza para comunicarse con el trabajador web. El onmessage
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 ; búsqueda : while ( n <= valor_final ) { n ++ ; for ( var i = 2 ; i <= Math . sqrt ( n ); i ++ ) if ( n % i == 0 ) continuar la búsqueda ; // ¡encontré una prima! postMessage ( n ); }
Para enviar un mensaje de vuelta a la página, el postMessage()
método se utiliza para publicar un mensaje cuando se encuentra una prima. [1]
Apoyo
Si el navegador admite trabajadores web, una propiedad de trabajador estará 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 comprueba la compatibilidad con el trabajador web en un navegador.
función browserSupportsWebWorkers () { retorno typeof ventana . Trabajador === "función" ; }
Actualmente, los trabajadores web son compatibles con Chrome , Opera , Edge , Internet Explorer (versión 10), Mozilla Firefox y Safari . [4] [5] [6] Mobile Safari para iOS ha admitido a los trabajadores web desde iOS 5. El navegador de Android admitió por primera vez a los trabajadores web en Android 2.1, pero se eliminó la compatibilidad en las versiones de Android 2.2 a 4.3 antes de restaurarse en Android 4.4. [7] [8]
Referencias
- ^ a b c d Web Workers , WHATWG , consultado el 3 de junio de 2010
- ^ "Estándar de vida HTML" . Html.spec.whatwg.org . 30 de enero de 2017 . Consultado el 31 de enero de 2017 .
- ^ "HTML5 en funcionamiento" Mark Pilgrim. O'Reilly / Google Press. Agosto de 2010
- ^ "Introducción a HTML5", Lawson, B. y Sharp, R., 2011.
- ^ "HTML5 y CSS3" Brian P. Hogan. Los programadores pragmáticos, LLC 2010.
- ^ "Puedo usar ... Web Worker" . caniuse.com . Consultado el 30 de septiembre de 2019 .
- ^ "Copia archivada" . Archivado desde el original el 19 de octubre de 2013 . Consultado el 10 de julio de 2011 .CS1 maint: copia archivada como título ( enlace )
- ^ "Puedo usar ... Tablas de soporte para HTML5, CSS3, etc." . caniuse.com . Consultado el 10 de junio de 2017 .
enlaces externos
- Trabajadores web - W3C
- Trabajadores web - WHATWG
- Uso de Web Workers - Mozilla Developer Network