HTML - API de Web Workers

Conceptos básicos de Web Worker

Los conceptos básicos de Web Worker abarcan la creación, comunicación y terminación de Web Workers. Para crear un Web Worker, se especifica el archivo de script que contiene el código del worker. La comunicación entre el script principal y el Web Worker se realiza mediante el paso de mensajes, utilizando el método postMessage() para enviar mensajes y el manejador de eventos onmessage para recibirlos. Cuando ya no se necesita un Web Worker, se puede terminar usando el método terminate().

Uso de Web Workers

Los Web Workers proporcionan un mecanismo para descargar tareas intensivas de CPU, realizar tareas en segundo plano y manejar scripts de larga duración sin bloquear el hilo principal de ejecución. Al usar Web Workers, puedes mejorar el rendimiento y la capacidad de respuesta de tus aplicaciones web.

Un caso de uso para Web Workers es descargar tareas intensivas de CPU. Cuando tienes operaciones computacionalmente pesadas, como algoritmos complejos, procesamiento de imágenes o análisis de datos, puedes mover esas tareas a un Web Worker. Esto permite que el hilo principal se mantenga receptivo, ya que los cálculos intensivos se realizan en un hilo separado. Los usuarios pueden continuar interactuando con la aplicación mientras el Web Worker maneja el trabajo intensivo de CPU en segundo plano.

Los Web Workers también son útiles para realizar tareas en segundo plano que no requieren interacción inmediata del usuario.

// Hilo principal
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Datos cargados:', event.data);
};
worker.postMessage('start');

// worker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        // Precargar datos o realizar tarea en segundo plano
        self.postMessage('datos cargados');
    }
};

Al ejecutar estas tareas en un Web Worker, puedes asegurarte de que no interfieran con la capacidad de respuesta del hilo principal. El Web Worker puede trabajar en segundo plano, obteniendo datos o realizando actualizaciones, sin afectar la experiencia del usuario.

Otro escenario donde los Web Workers destacan es en el manejo de scripts de larga duración.

// Hilo principal
const worker = new Worker('longTaskWorker.js');
worker.onmessage = function(event) {
    console.log('Tarea completada:', event.data);
};
worker.postMessage('start');

// longTaskWorker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        // Realizar tarea de larga duración
        let result = realizarCalculoComplejo();
        self.postMessage(result);
    }
};

function realizarCalculoComplejo() {
    // Lógica de cálculo complejo
    return 'resultado calculado';
}

Si tienes un script que tarda una cantidad considerable de tiempo en ejecutarse, como una tarea de procesamiento de datos compleja o una animación de larga duración, ejecutarlo en el hilo principal puede congelar la interfaz de usuario. Al mover el script de larga duración a un Web Worker, puedes mantener el hilo principal libre para responder a las interacciones del usuario. El Web Worker puede ejecutar el script de forma asíncrona, permitiendo que la aplicación siga siendo receptiva.

Comunicación del Web Worker

La comunicación del Web Worker implica enviar mensajes entre el script principal y el Web Worker, y recibir mensajes del Web Worker de vuelta al script principal. La comunicación se realiza a través del método postMessage() y el manejador de eventos onmessage.

Para enviar un mensaje a un Web Worker, se utiliza el método postMessage() desde el script principal. El método postMessage() toma el mensaje como argumento, que puede ser un valor simple o un objeto.

// Script principal
const worker = new Worker('worker.js');
worker.postMessage('Hola desde el script principal');

En el lado del Web Worker, puedes recibir el mensaje configurando un manejador de eventos onmessage. El objeto de evento pasado al manejador contiene los datos del mensaje en su propiedad data.

// worker.js
self.onmessage = function(event) {
    console.log('Mensaje recibido:', event.data);
};

De manera similar, el Web Worker puede enviar mensajes de vuelta al script principal usando el método postMessage(). El script principal puede recibir estos mensajes configurando su propio manejador de eventos onmessage.

// worker.js
self.postMessage('Hola desde el Web Worker');

// Script principal
worker.onmessage = function(event) {
    console.log('Mensaje recibido del worker:', event.data);
};

Además de enviar valores simples u objetos, también puedes transferir datos usando objetos transferibles. Los objetos transferibles te permiten pasar datos grandes, como ArrayBuffer o MessagePort, entre el script principal y el Web Worker sin copiar los datos. Esto puede ayudar a mejorar el rendimiento cuando se trabaja con grandes conjuntos de datos. Para transferir datos, se pasa un array de objetos transferibles como segundo argumento al método postMessage().

// Script principal
const largeData = new ArrayBuffer(1024 * 1024); // 1MB de datos
worker.postMessage({ data: largeData }, [largeData]);

// Script principal
worker.onmessage = function(event) {
    console.log('Mensaje recibido del worker:', event.data);
    // Manejar el mensaje y realizar acciones
};

// worker.js
self.onmessage = function(event) {
    console.log('Mensaje recibido:', event.data);
    // Manejar el mensaje y realizar acciones
    self.postMessage('Mensaje procesado');
};

Manejo de errores en Web Workers

El manejo de errores es una parte importante al trabajar con Web Workers. Implica manejar errores que pueden ocurrir en el script del Web Worker y enviar esos errores al script principal para tomar acciones.

Para manejar errores en Web Workers, necesitas escuchar eventos de error. El script del Web Worker puede activar un evento de error usando el manejador de eventos self.onerror. Este manejador de eventos se llama cuando ocurre un error en el script del Web Worker.

// worker.js
self.onerror = function(event) {
    console.error('Error en Web Worker:', event.message);
    // Manejar el error o realizar tareas de limpieza
    self.postMessage({ error: event.message });
};

En el ejemplo anterior, el manejador de eventos self.onerror se usa para capturar cualquier error que ocurra en el script del Web Worker. Puedes registrar el mensaje de error, manejar el error o realizar cualquier tarea de limpieza necesaria.

Para enviar el error al script principal, puedes enviar un mensaje de error usando self.postMessage(). El script principal puede entonces escuchar este mensaje de error y tomar acciones.

// Script principal
worker.onmessage = function(event) {
    if (event.data.error) {
        console.error('Error recibido del Web Worker:', event.data.error);
        // Manejar el error en el script principal
    }
};

En el script principal, puedes verificar si el mensaje recibido tiene una propiedad de error. Si se recibe un error, puedes registrar el mensaje de error y manejarlo.

// Script principal
const worker = new Worker('script-inexistente.js'); // Lanza un error

// worker.js
console.log('Hola desde Web Worker') // Falta punto y coma

// worker.js
const datoGrande = new Array(1000000000); // Asignando un array grande

Técnicas Avanzadas de Web Worker

Los Web Workers ofrecen técnicas avanzadas que permiten ampliar su funcionalidad y usarlos con otras características y APIs de JavaScript. Veamos algunas de estas técnicas avanzadas.

Importar scripts en Web Workers es una forma de modularizar y reutilizar código dentro de un Web Worker. Al usar la función importScripts(), puedes cargar archivos JavaScript externos en el ámbito del Web Worker. Esto te permite dividir tu código de worker en archivos separados para una mejor organización y mantenimiento.

// worker.js
importScripts('utility.js', 'math.js');

self.onmessage = function(event) {
    // Usa funciones o variables de los scripts importados
    const result = performCalculation(event.data);
    self.postMessage(result);
};

Usar Web Workers con promesas es otra técnica poderosa. Las promesas proporcionan una forma de manejar operaciones asíncronas y mejorar la legibilidad del código. Al envolver la comunicación entre el script principal y el Web Worker dentro de promesas, puedes crear un flujo de datos más estructurado e intuitivo.

// Script principal
function performTask(data) {
    return new Promise((resolve, reject) => {
        const worker = new Worker('worker.js');
        worker.onmessage = function(event) {
            resolve(event.data);
        };
        worker.onerror = function(error) {
            reject(error);
        };
        worker.postMessage(data);
    });
}

// Uso
performTask('Datos de la tarea')
    .then(result => {
        console.log('Resultado de la tarea:', result);
    })
    .catch(error => {
        console.error('Error en la tarea:', error);
    });

Combinar Web Workers con otras APIs abre nuevas posibilidades. Por ejemplo, puedes usar Web Workers con la API de Archivo para realizar tareas de procesamiento de archivos en segundo plano. Esto te permite leer y modificar archivos sin bloquear el hilo principal.

// Script principal
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const worker = new Worker('fileWorker.js');
    worker.onmessage = function(event) {
        console.log('Archivo procesado:', event.data);
    };
    worker.postMessage(file);
});

// fileWorker.js
self.onmessage = function(event) {
    const file = event.data;
    // Procesa el archivo en el Web Worker
    // ...
    self.postMessage('Procesamiento de archivo completado');
};

Ejemplos de Web Workers

Los Web Workers proporcionan una forma de mover tareas del hilo principal y mejorar el rendimiento de las aplicaciones web. Veamos algunos ejemplos que muestran el uso de Web Workers en diferentes situaciones.

// Script principal (main.js)
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Resultado recibido del worker:', event.data);
};
worker.postMessage(5);

// Script del worker (worker.js)
self.onmessage = function(event) {
  const number = event.data;
  const result = fibonacci(number);
  self.postMessage(result);
};

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

En este ejemplo simple, el script principal crea un nuevo Web Worker y le envía un número usando postMessage(). El script del worker recibe el mensaje, calcula el número de Fibonacci usando una función recursiva y envía el resultado de vuelta al script principal usando postMessage(). El script principal registra el resultado recibido en la consola.

// Script principal (main.js)
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'progress') {
    updateProgressBar(data.progress);
  } else if (type === 'result') {
    displayResult(data.result);
  }
};
worker.postMessage({ type: 'start', data: { /* datos complejos */ } });

// Script del worker (worker.js)
self.onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'start') {
    processData(data);
  }
};

function processData(data) {
  // Realizar procesamiento de datos complejo
  for (let i = 0; i < data.length; i++) {
    // Procesar elemento de datos
    const progress = ((i + 1) / data.length) * 100;
    self.postMessage({ type: 'progress', data: { progress } });
  }
  const result = { /* datos procesados */ };
  self.postMessage({ type: 'result', data: { result } });
}

En este ejemplo más complejo, el script principal envía un mensaje al worker con un tipo y datos específicos. El script del worker recibe el mensaje, verifica el tipo de mensaje y realiza la acción apropiada. En este caso, cuando el tipo de mensaje es 'start', el worker procesa los datos recibidos. Durante el procesamiento, el worker envía actualizaciones de progreso de vuelta al script principal usando postMessage(). Una vez que el procesamiento está completo, el worker envía el resultado final de vuelta al script principal. El script principal maneja los mensajes recibidos según su tipo, actualizando la barra de progreso o mostrando el resultado.