Cargando...

HTML Web Workers

Antes, Drag and Drop movía o etiquetaba cargas DOM con eventos de puntero. Esta lección deja los gestos de puntero y presenta Web Workers: JavaScript en un hilo de fondo para que un bucle largo no congele la UI. Alcance práctico — crear, mensajear, sin DOM en el worker — no flotas SharedWorker.

Por qué web workers en un curso HTML

Los principiantes ven la página congelada con un bucle ocupado en el hilo principal. Los workers son la primera API habitual para calcular en segundo plano. Tras DnD, la división es otra: el script de página posee DOM/UI; el worker posee el cálculo pesado y solo habla por mensajes.

Respuesta directa

1) new Worker("worker.js") o Blob. 2) postMessage desde la página. 3) En el worker onmessage, calcula, postMessage de vuelta. 4) Actualiza el DOM solo en la página. 5) Sin acceso directo al DOM. 6) Prefiere http(s) o Blob.

📊 main thread vs worker

Topic Main page script Dedicated worker
Typical role UI, DOM, create Worker Heavy compute off UI thread
Talks via postMessage / onmessage postMessage / onmessage
Can touch DOM? Yes No — return data instead
Beginner entry new Worker(url or Blob) onmessage + compute + postMessage
This course depth Required Required (simple round-trip)
Not this lesson Drag-and-drop gestures SharedWorker / Service Worker products

Mini ida y vuelta con Blob Worker

Un HTML construye un worker desde un Blob sin worker.js aparte. La página envía un número; el worker devuelve una suma en bucle.

Blob Worker compute round-trip

html 
<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>

Leer las llamadas de ida y vuelta

  • Blob + createObjectURL sin segundo archivo
  • new Worker inicia script de fondo
  • postMessage envía el número
  • El worker calcula y responde
  • La página escribe en pre — DOM en el hilo principal
  • A diferencia de DnD: sin draggable
  • Mantén la demo pequeña

La UI se queda en el hilo principal

El worker devuelve datos; el script de página decide qué ve el usuario. Esta demo pide un string; onmessage de la página actualiza el párrafo.

Worker replies; page updates DOM

html 
<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>

Leer la idea de propiedad de la UI

  • El worker solo hace eco de un string — sin document
  • La página asigna textContent
  • El mismo puente de mensajes
  • No es DnD
  • No es Service Worker
  • Usa worker cuando el trabajo arriesgue congelar la UI
  • Siguiente: SSE

Cuándo usar un worker

  • Bucle CPU largo: buen fit
  • Cambio mínimo de string: suele el hilo principal
  • Mover tarjeta: fue DnD
  • GPS: fue Geolocation
  • Productos SharedWorker/Service Worker: fuera de esta intro
  • Actualizar botones desde el worker: no permitido

Práctica — crea, mensajéa, pinta

  1. Prueba la demo de suma.
  2. Cambia 40.
  3. Prueba la demo eco.
  4. Opcional: worker.js por http(s).
  5. Frase: DnD con puntero; workers off-thread por mensajes.
  6. Prefiere http(s)/Blob.
  7. Vista previa: SSE.

Errores fáciles

  • Esperar querySelector dentro del worker
  • Worker para tareas minúsculas
  • Confundir con DnD
  • Rutas file:// frágiles
  • Olvidar onmessage en la página
  • Tomar Blob como único patrón de producción
  • Tomar la intro como curso SharedWorker completo

Resumen

  • Los workers ejecutan JS fuera del hilo de UI
  • postMessage/onmessage; DOM solo en la página
  • Workers clásicos sin document/window
  • Blob para demos; http(s) para worker.js
  • DnD era mover/etiquetar con puntero; esta lección cómputo de fondo + mensajes
  • Siguiente: SSE

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
5
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 66 de 68
Html Tutorial