JavaScript Academy · Lección

Creación de un Web Worker

Inicie un hilo en segundo plano para realizar trabajo.

Creación de un Web Worker es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Por qué Web Workers?

JavaScript se ejecuta en un único hilo principal. Un cálculo largo bloquea todo: la interfaz se congela y los clics dejan de responder. Los Web Workers ejecutan scripts en un hilo en segundo plano y mantienen la página receptiva.

Crear un worker

Cree un worker pasando una URL de script al constructor Worker. El navegador carga ese archivo y lo ejecuta en un hilo independiente.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

El script del worker

El archivo del worker es JavaScript normal, pero se ejecuta en su propio ámbito global (sin window, sin document). Solo se comunica mediante mensajes.

// worker.js
console.log('worker started');
// This runs off the main thread.

Dos ámbitos globales independientes

La página principal y el worker tienen cada uno su propio ámbito global y memoria. No pueden compartir variables directamente; intercambian copias de datos mediante mensajes.

Hilo principal: window, DOM, interfaz
Hilo del worker: self, cálculos, sin DOM

Self en el worker

Dentro de un worker, el objeto global es self (un DedicatedWorkerGlobalScope). Puede asociar controladores y llamar a API en él, aunque self suele estar implícito.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Workers de módulos

Puede crear un worker que use import de módulos ES pasando la opción type: 'module'. Esto permite que el worker importe otros módulos de forma ordenada.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Importar scripts (clásico)

En un worker clásico (no basado en módulos), use importScripts para cargar scripts adicionales de forma síncrona en el ámbito del worker.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Detener un worker

Detenga un worker desde el hilo principal con worker.terminate(), o desde su interior con self.close(). Esto libera el hilo y su memoria.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Gestionar errores del worker

Escuche el evento error del worker para capturar las excepciones no controladas que se produzcan en su interior. El evento incluye el mensaje, el nombre del archivo y el número de línea.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Requisito del mismo origen

El script del worker debe servirse desde el mismo origen que la página, o mediante una URL de Blob. No puede cargar directamente un worker desde una URL arbitraria de otro origen.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Dedicado frente a compartido

Un Worker es dedicado: está vinculado a la página que lo creó. Varias páginas del mismo origen pueden acceder a un SharedWorker. Este curso se centra en los workers dedicados.

Comprobación rápida

Compruebe su comprensión de la creación de Web Workers.

Resumen

Ha aprendido a crear Web Workers:

new Worker('worker.js') crea un hilo en segundo plano.
El worker tiene su propio objeto global (self) y no tiene DOM.
Use type: 'module' para las importaciones, o importScripts en workers clásicos.
terminate() / self.close() lo detienen.
Los workers deben ser del mismo origen.

A continuación, veremos la comunicación entre hilos.

Preguntas frecuentes

¿La lección «Creación de un Web Worker» es gratis?

Sí — el texto completo de «Creación de un Web Worker» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Creación de un Web Worker»?

Inicie un hilo en segundo plano para realizar trabajo. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Creación de un Web Worker»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy