JavaScript Academy · Aula

Criando um Web Worker

Inicie uma thread em segundo plano para executar tarefas.

Criando um Web Worker é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Por que usar Web Workers

O JavaScript é executado em uma única linha de execução principal. Um cálculo longo bloqueia tudo: a interface congela e os cliques deixam de responder. Web Workers executam scripts em uma linha de execução em segundo plano, mantendo a página responsiva.

Criando um worker

Crie um worker passando uma URL de script ao construtor Worker. O navegador carrega esse arquivo e o executa em uma linha de execução separada.

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

O script do worker

O arquivo do worker é JavaScript puro, mas é executado em seu próprio escopo global (sem window e sem document). Ele se comunica apenas por meio de mensagens.

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

Duas áreas globais separadas

A página principal e o worker têm seu próprio escopo global e sua própria memória. Eles não podem compartilhar variáveis diretamente; trocam cópias de dados por meio de mensagens.

Linha de execução principal: window, DOM, interface
Linha de execução do worker: self, cálculos, sem DOM

Self no worker

Dentro de um worker, o objeto global é self (um DedicatedWorkerGlobalScope). Você associa manipuladores e chama APIs nele, embora self geralmente seja implícito.

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

Workers como módulos

Você pode criar um worker que use o módulo ES import passando a opção type: 'module'. Isso permite que o worker importe outros módulos de forma organizada.

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

Importando scripts (clássico)

Em um worker clássico, que não usa módulos, use importScripts para carregar scripts adicionais de forma síncrona no escopo do worker.

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

Interrompendo um worker

Interrompa um worker a partir da linha de execução principal com worker.terminate() ou, de dentro dele, com self.close(). Isso libera a linha de execução e a memória usadas por ele.

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

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

Lidando com erros do worker

Escute o evento error do worker para capturar exceções não tratadas lançadas dentro dele. O evento contém a mensagem, o nome do arquivo e o número da linha.

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

Requisito de mesma origem

O script do worker deve ser servido pela mesma origem que a página ou por meio de uma URL de Blob. Não é possível carregar um worker diretamente de uma URL arbitrária de outra origem.

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

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

Dedicado versus compartilhado

Um Worker é dedicado: fica vinculado à página que o criou. Um SharedWorker pode ser acessado por várias páginas da mesma origem. Este curso se concentra em workers dedicados.

Verificação rápida

Teste sua compreensão da criação de Web Workers.

Recapitulação

Você aprendeu a criar Web Workers:

new Worker('worker.js') cria uma linha de execução em segundo plano.
O worker tem seu próprio objeto global (self) e não tem DOM.
Use type: 'module' para importações ou importScripts em workers clássicos.
terminate() / self.close() interrompem o worker.
Os workers devem ter a mesma origem.

Agora, vamos conhecer a comunicação entre linhas de execução.

Perguntas Frequentes

A aula “Criando um Web Worker” é grátis?

Sim — o texto completo de “Criando um Web Worker” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Criando um Web Worker”?

Inicie uma thread em segundo plano para executar tarefas. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Criando um Web Worker”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy