Trabajador web
Trabajador web | ||
---|---|---|
Información general | ||
Tipo de programa | API web | |
Desarrollador | ||
Modelo de desarrollo | código abierto | |
Información técnica | ||
Programado en | JavaScript | |
Un trabajador web (Web worker en inglés), tal como lo define la World Wide Web Consortium (W3C) y el Web Hypertext Application Technology Working Group (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] Los trabajadores web a menudo pueden utilizar CPU multinúcleo de manera más efectiva.[2] Un tipo de trabajador web es el Service Worker (o trabajador de servicio), usado en las aplicaciones web progresivas (PWA).
El W3C y WHATWG visualizan a los trabajadores web como scripts de larga ejecución que no se ven interrumpidos por scripts que responden a los 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.
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 del estándar Living HTML.[1]
Visió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 de arranque 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, si bien 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 envío de mensajes. El siguiente código crea un Trabajador que ejecutará el JavaScript en el archivo dado.
var worker = new Worker("worker_script.js");
Para enviar un mensaje al trabajador, se usa el método postMessage
del objeto trabajador como se muestra a continuación.
worker.postMessage("Hello World!");
La propiedad onmessage
utiliza un controlador de eventos para recuperar información de un trabajador.
worker.onmessage = function(event) {
alert("Received message " + event.data);
doSomething();
}
function doSomething() {
//do work
worker.postMessage("Work done!");
}
worker.terminate();
Una vez que se termina un trabajador, queda fuera de alcance y la variable que hace referencia a él queda 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:
<!DOCTYPE html>
<html>
<head>
<title>Worker example: One-core computation</title>
</head>
<body>
<p>The highest prime number discovered so far is: <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 llamada al constructor Worker()
crea un trabajador web y devuelve un objeto worker
que representa a ese trabajador web, que se utiliza para comunicarse con el trabajador web. El controlador de eventos onmessage
ese objeto permite que el código reciba mensajes del trabajador web.
El Web Worker en sí es el siguiente:
var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
n++;
for (var i = 2; i <= Math.sqrt(n); i++)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}
Para enviar un mensaje de regreso a la página, el método postMessage()
se usa para publicar un mensaje cuando se encuentra un número primo.[1]
Apoyo
Si el navegador admite trabajadores web, una propiedad de trabajador estará disponible en el objeto de la ventana global.[3] La propiedad del trabajador no estará definida si el navegador no la admite.
El siguiente código de ejemplo verifica la compatibilidad del trabajador web en un navegador
function browserSupportsWebWorkers() {
return typeof window.Worker === "function";
}
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 apoyado a los trabajadores web desde iOS 5. El navegador de Android primero admitió a los trabajadores web en Android 2.1, pero el soporte se eliminó en las versiones de Android 2.2–4.3 antes de restaurarse en Android 4.4.[7][8][9]
Referencias
- ↑ a b c d Web Workers, WHATWG, consultado el 3 de junio de 2010.
- ↑ «HTML Living Standard». Html.spec.whatwg.org. 30 de enero de 2017. Consultado el 31 de enero de 2017.
- ↑ "HTML5 Up and Running" Mark Pilgrim. O'Reilly/Google Press. August 2010
- ↑ "Introducing HTML5", Lawson, B. and Sharp, R., 2011.
- ↑ "HTML5 and CSS3" Brian P. Hogan. The Pragmatic Programmers, LLC 2010.
- ↑ «Can I Use... Web Worker». caniuse.com. Consultado el 30 de septiembre de 2019.
- ↑ «Archived copy». Archivado desde el original el 19 de octubre de 2013. Consultado el 10 de julio de 2011.
- ↑ «Can I use... Support tables for HTML5, CSS3, etc». caniuse.com. Consultado el 10 de junio de 2017.
- ↑ «Best WordPress course». caniuse.com. Consultado el 10 de junio de 2017.
Enlaces externos
- Trabajadores web - W3C Archivado el 7 de junio de 2015 en Wayback Machine.
- Trabajadores web - WHATWG
- Uso de trabajadores web Archivado el 7 de mayo de 2012 en Wayback Machine. - Mozilla Developer Network