Web Worker: una forma de ejecutar scripts en segundo plano en un hilo diferente al hilo principal (Ventana) actual.

1. Trabajadores web versus asincrónicos usando event_loop
2. Introducción a los trabajadores web
3. cómo crear un trabajador web
4. Por ejemplo, con un trabajador web
5. limitación de trabajadores web
6. operación asincrónica en Web Workers

1. Trabajadores web frente a operaciones asincrónicas mediante bucle de eventos

JavaScript generalmente maneja operaciones asincrónicas colocando tareas en las colas correspondientes (cola de macrotareas, cola de microtareas), con el bucle de eventos verificando continuamente estas colas y empujando las tareas a la pila de llamadas cuando están listas para ejecutarse. Este enfoque garantiza una ejecución sin bloqueo pero aún así ejecuta todo en un solo subproceso.

Web Workers, por otro lado, permite que los scripts se ejecuten en un hilo completamente separado con su propia pila de llamadas, colas asincrónicas y bucle de eventos. Esta separación evita que el hilo principal quede bloqueado por cálculos pesados ​​o tareas de larga duración, ya que el trabajador opera de forma independiente.

2. Introducción a los trabajadores web

Los trabajadores web ejecutan scripts en un contexto diferente al contexto de la ventana principal, lo que permite el paralelismo en las aplicaciones web. La API Web Worker proporciona varios tipos de trabajadores:

• Trabajadores dedicados: utilizados por un único script, son ideales para descargar tareas del hilo principal.
• Trabajadores compartidos: accesibles mediante múltiples scripts que se ejecutan en diferentes contextos (por ejemplo, diferentes ventanas o iframes).
• Trabajadores de servicios: opera como un servidor proxy entre las aplicaciones web, el navegador y la red, proporcionando funcionalidades como soporte sin conexión y almacenamiento en caché.

Este artículo se centra en los trabajadores dedicados, que son los más sencillos de implementar y los más utilizados.

3. Cómo crear un trabajador web

Para crear un trabajador web, puedes utilizar los siguientes métodos clave:

• new Worker(): El constructor para crear un nuevo trabajador.
• postMessage(): Envía mensajes desde el hilo principal al trabajador o viceversa.
• onmessage: una función de devolución de llamada configurada para manejar los mensajes recibidos por el trabajador.
• terminate(): Detiene al trabajador inmediatamente.

4. Ejemplo sencillo

Creemos un trabajador para recuperar datos de una API, específicamente imágenes de perros de la API Dog CEO.

4.1 Código de Trabajador

Aquí está la implementación del script del trabajador. Observe que dentro del trabajador, self se usa para referirse al contexto global:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

En este código, el trabajador escucha los mensajes (onmessage) y recupera datos de la URL dada varias veces según lo especificado en el recuento.

Así es como se ve la pila de llamadas dentro del trabajador:

4.2 Código de Cliente

El hilo principal usa el trabajador de esta manera:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

Este código demuestra cómo enviar un mensaje al trabajador y recibir los datos obtenidos en el hilo principal.

para ver el código completo, vaya al código

5. Limitaciones de los trabajadores web

Aunque los trabajadores web se ejecutan en un hilo separado del hilo de la ventana principal, tienen ciertas limitaciones:

• Sin acceso a DOM: Los trabajadores no pueden manipular directamente el DOM. La comunicación con el hilo principal es necesaria para actualizar la interfaz de usuario.
• Consumo de recursos: el uso excesivo de trabajadores web puede provocar un uso elevado de memoria, ya que cada trabajador requiere recursos adicionales para operar de forma independiente.