JavaScript Academy · Aula

Objetos transferíveis

Mova dados com eficiência, sem copiá-los.

Objetos transferíveis é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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.

O custo da clonagem

A clonagem estruturada copia os dados byte a byte. Para buffers grandes (imagens, áudio e matrizes extensas), essa cópia é lenta e duplica o uso de memória. Objetos transferíveis resolvem isso movendo a propriedade em vez de copiar.

O que pode ser transferido

Apenas determinados tipos de objetos podem ser transferidos, principalmente ArrayBuffer. Outros incluem MessagePort, ImageBitmap e OffscreenCanvas.

ArrayBuffer — memória binária bruta
MessagePort — um ponto de conexão de canal
ImageBitmap — dados de imagem decodificados

A lista de transferência

postMessage aceita um segundo argumento: uma lista de objetos transferíveis. Os objetos nessa lista são movidos, não copiados.

const buffer = new ArrayBuffer(1024 * 1024); // 1 MB
worker.postMessage(buffer, [buffer]); // transfer it

A propriedade é transferida

Após a transferência, o lado remetente não pode mais usar o buffer; ele fica desanexado (byteLength 0). O lado receptor passa a ser proprietário da mesma memória subjacente, sem que uma cópia seja feita.

const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);
console.log(buffer.byteLength); // 0 - now detached

Transferindo matrizes tipadas

Você transfere o ArrayBuffer subjacente de uma matriz tipada por meio da propriedade .buffer. A própria visualização não é transferível, mas seu buffer é.

const data = new Float64Array(100000);
worker.postMessage(data, [data.buffer]);
// data is now detached on this side.

Recebendo uma transferência

O lado receptor lê o objeto transferido em event.data, exatamente como em uma mensagem clonada. A única diferença é que nenhuma cópia foi feita.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data; // we now own this memory
  const view = new Uint8Array(buffer);
  view[0] = 255;
};

Enviando os resultados de volta

O worker pode transferir o buffer de volta após o processamento, novamente sem cópia, devolvendo a propriedade à linha de execução principal.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data;
  // ...process the bytes...
  self.postMessage(buffer, [buffer]); // transfer back
};

Desempenho da transferência e da clonagem

Para alguns quilobytes, a diferença é insignificante. Para megabytes de dados binários, a transferência é muito mais rápida e evita um pico de uso de memória. Prefira-a para buffers grandes.

Evitando erros de uso após a transferência

Um erro comum é ler o buffer depois de transferi-lo. Sempre trate o buffer como inexistente assim que ele aparecer na lista de transferência.

worker.postMessage(buffer, [buffer]);
// BUG: buffer is detached here; this reads zero length.
// const len = buffer.byteLength; // 0

Combinando dados clonados e transferidos

Você pode enviar um objeto que contenha um buffer e transferir somente esse buffer. O objeto é clonado; o buffer listado é movido.

const msg = { type: 'frame', pixels: buffer };
worker.postMessage(msg, [buffer]);
// msg.type is cloned; buffer is transferred.

Quando usar a transferência

Use objetos transferíveis para processamento de imagens, áudio e vídeo, cálculos numéricos extensos e qualquer fluxo de processamento que mova grandes blocos binários entre linhas de execução. Para dados pequenos semelhantes a JSON, a clonagem comum é mais simples e suficiente.

Verificação rápida

Teste sua compreensão sobre objetos transferíveis.

Recapitulação

Você aprendeu sobre objetos transferíveis:

Passe uma lista de transferência como segundo argumento para postMessage.
ArrayBuffer (e alguns outros objetos) é movido em vez de copiado.
O buffer do remetente fica desanexado depois disso.
Transfira uma matriz tipada por meio de seu .buffer.
Use esse recurso para dados binários grandes; clone dados pequenos.

A seguir, casos de uso e limitações de workers.

Perguntas Frequentes

A aula “Objetos transferíveis” é grátis?

Sim — o texto completo de “Objetos transferíveis” é 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 “Objetos transferíveis”?

Mova dados com eficiência, sem copiá-los. 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 3 de 4.

Quanto tempo leva a aula “Objetos transferíveis”?

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