HTML Web Workers
Antes, Drag and Drop movia ou etiquetava cargas DOM com eventos de ponteiro. Esta lição deixa gestos de ponteiro e apresenta Web Workers: JavaScript numa thread de fundo para um ciclo longo não congelar a UI. Âmbito prático — criar, mensagens, sem DOM no worker — sem frotas SharedWorker.
Por que web workers num curso HTML
Principiantes veem a página congelada com um ciclo ocupado na thread principal. Workers são a primeira API habitual para calcular em fundo. Após DnD, a divisão é outra: o script da página possui DOM/UI; o worker possui o cálculo pesado e só fala por mensagens.
Resposta direta
1) new Worker("worker.js") ou Blob. 2) postMessage a partir da página. 3) No worker onmessage, calcule, postMessage de volta. 4) Atualize o DOM só na página. 5) Sem acesso direto ao DOM. 6) Prefira http(s) ou 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 e volta Blob Worker
Um HTML constrói um worker a partir de um Blob sem worker.js separado. A página envia um número; o worker devolve uma soma em ciclo.
<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>
Ler as chamadas de ida e volta
- Blob + createObjectURL sem segundo ficheiro
- new Worker inicia script de fundo
- postMessage envia o número
- O worker calcula e responde
- A página escreve no pre — DOM na thread principal
- Ao contrário de DnD: sem draggable
- Mantenha a demo pequena
A UI fica na thread principal
O worker devolve dados; o script da página decide o que o utilizador vê. Esta demo pede uma string; onmessage da página atualiza o parágrafo.
<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>
Ler a ideia de propriedade da UI
- O worker só faz eco de uma string — sem document
- A página define textContent
- A mesma ponte de mensagens
- Não é DnD
- Não é curso Service Worker
- Use worker quando o trabalho arrisque congelar a UI
- A seguir: SSE
Quando usar um worker
- Ciclo CPU longo: bom fit
- Ajuste mínimo de string: muitas vezes a thread principal
- Mover cartão: foi DnD
- GPS: foi Geolocation
- Produtos SharedWorker/Service Worker: fora desta intro
- Atualizar botões a partir do worker: não permitido
Prática — crie, envie mensagem, pinte
- Teste a demo da soma.
- Mude 40.
- Teste a demo eco.
- Opcional: worker.js em http(s).
- Frase: DnD com ponteiro; workers off-thread por mensagens.
- Prefira http(s)/Blob.
- Antevisão: SSE.
Erros fáceis
- Esperar querySelector dentro do worker
- Worker para tarefas minúsculas
- Confundir com DnD
- Caminhos file:// frágeis
- Esquecer onmessage na página
- Tratar Blob como único padrão de produção
- Tratar a intro como curso SharedWorker completo
Resumo
- Workers executam JS fora da thread de UI
- postMessage/onmessage; DOM só na página
- Workers clássicos sem document/window
- Blob para demos; http(s) para worker.js
- DnD era mover/etiquetar com ponteiro; esta lição computação de fundo + mensagens
- Seguinte: SSE
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo