JavaScript Academy · Lezione

Oggetti trasferibili

Sposti i dati in modo efficiente senza copiarli.

Oggetti trasferibili è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Il costo della clonazione

Structured clone copia i dati byte per byte. Per buffer di grandi dimensioni (immagini, audio, array di grandi dimensioni), questa copia è lenta e raddoppia il consumo di memoria. Gli oggetti trasferibili risolvono il problema spostando la proprietà invece di copiare i dati.

Cosa si può trasferire

Solo alcuni tipi di oggetti sono trasferibili, soprattutto ArrayBuffer. Tra gli altri ci sono MessagePort, ImageBitmap e OffscreenCanvas.

ArrayBuffer — memoria binaria grezza
MessagePort — un'estremità del canale
ImageBitmap — dati di immagine decodificati

L'elenco di trasferimento

postMessage accetta un secondo argomento: un elenco di oggetti trasferibili. Gli oggetti presenti nell'elenco vengono spostati, non copiati.

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

La proprietà viene trasferita

Dopo il trasferimento, il lato che invia non può più usare il buffer; questo diventa detached (byteLength 0). Il lato che riceve ora possiede la stessa memoria sottostante, senza effettuare alcuna copia.

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

Trasferimento di array tipizzati

Si trasferisce l'ArrayBuffer sottostante a un array tipizzato tramite la relativa proprietà .buffer. La vista non è trasferibile, ma lo è il suo buffer.

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

Ricezione di un trasferimento

Il lato che riceve legge l'oggetto trasferito da event.data esattamente come un messaggio clonato. La differenza consiste esclusivamente nel fatto che non è stata effettuata alcuna copia.

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

Invio dei risultati

Dopo l'elaborazione, il worker può trasferire nuovamente il buffer, ancora una volta senza effettuare copie, restituendone la proprietà al thread principale.

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

Prestazioni: trasferimento e clonazione

Per pochi kilobyte la differenza è trascurabile. Per megabyte di dati binari, il trasferimento è nettamente più veloce ed evita un picco nell'uso della memoria. Lo utilizzi per i buffer di grandi dimensioni.

Evitare i bug di utilizzo dopo il trasferimento

Un errore comune consiste nel leggere il buffer dopo averlo trasferito. Consideri sempre il buffer come non più disponibile non appena compare nell'elenco di trasferimento.

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

Combinare dati clonati e trasferiti

È possibile inviare un oggetto che contiene un buffer e trasferire solo quel buffer. L'oggetto viene clonato, mentre il buffer elencato viene spostato.

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

Quando usare il trasferimento

Utilizzi gli oggetti trasferibili per l'elaborazione di immagini, audio e video, per i calcoli numerici di grandi dimensioni e per qualsiasi pipeline che sposti grandi blocchi di dati binari tra thread. Per dati piccoli simili a JSON, la semplice clonazione è più pratica e adeguata.

Verifica rapida

Verifichi la Sua comprensione degli oggetti trasferibili.

Riepilogo

Ha imparato a usare gli oggetti trasferibili:

Passi un elenco di trasferimento come secondo argomento a postMessage.
ArrayBuffer (e pochi altri oggetti) viene spostato invece di essere copiato.
Il buffer del mittente diventa detached in seguito.
Trasferisca un array tipizzato tramite il relativo .buffer.
Lo utilizzi per dati binari di grandi dimensioni; per i dati piccoli usi la clonazione.

Prossimo argomento: casi d'uso e limitazioni dei worker.

Domande Frequenti

La lezione «Oggetti trasferibili» è gratuita?

Sì — il testo completo di «Oggetti trasferibili» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Oggetti trasferibili»?

Sposti i dati in modo efficiente senza copiarli. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Oggetti trasferibili»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy