JavaScript Academy · Lektion

Transferable Objects

Flyt data effektivt uden at kopiere dem.

Lektion 3 af 413 trin

Transferable Objects er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Omkostningerne ved kloning

Struktureret kloning kopierer data byte for byte. For store buffere (billeder, lyd, store arrays) er denne kopiering langsom og fordobler hukommelsesforbruget. Overførbare objekter løser dette ved at flytte ejerskabet i stedet for at kopiere.

Hvad kan overføres

Kun bestemte objekttyper kan overføres, især ArrayBuffer. Andre omfatter MessagePort, ImageBitmap og OffscreenCanvas.

ArrayBuffer — rå binær hukommelse
MessagePort — et kanalendepunkt
ImageBitmap — afkodede billeddata

Overførselslisten

postMessage accepterer et andet argument: en liste over overførbare objekter. Objekterne på listen flyttes, ikke kopieres.

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

Ejerskabet flyttes

Efter overførslen kan afsenderen ikke længere bruge bufferen; den bliver frakoblet (byteLength 0). Modtageren ejer nu den samme underliggende hukommelse; der blev ikke foretaget nogen kopiering.

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

Overførsel af typede arrays

Du overfører den underliggende ArrayBuffer for et typet array via dets .buffer-egenskab. Selve visningen kan ikke overføres, men dens buffer kan.

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

Modtagelse af en overførsel

Modtagersiden læser det overførte objekt fra event.data præcis som en klonet meddelelse. Forskellen er udelukkende, at der ikke blev foretaget en kopiering.

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

Afsendelse af resultater tilbage

Workeren kan overføre bufferen tilbage efter behandlingen, igen uden kopiering, så ejerskabet gives tilbage til hovedtråden.

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

Ydeevne ved overførsel kontra kloning

For nogle få kilobytes er forskellen ubetydelig. For megabytes binære data er overførsel dramatisk hurtigere og undgår en midlertidig stigning i hukommelsesforbruget. Vælg det ved store buffere.

Undgå fejl ved brug efter overførsel

En almindelig fejl er at læse bufferen, efter at den er overført. Betragt altid bufferen som væk, så snart den står på overførselslisten.

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

Kombination af klonede og overførte data

Du kan sende et objekt, der indeholder en buffer, og kun overføre den buffer. Objektet klones; den angivne buffer flyttes.

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

Hvornår skal overførsel bruges

Brug overførbare objekter til behandling af billeder, lyd og video, store numeriske beregninger og ethvert behandlingsforløb, der flytter store binære datablokke mellem tråde. Til små JSON-lignende datamængder er almindelig kloning enklere og fungerer fint.

Hurtig test

Test din forståelse af overførbare objekter.

Besvar den i den interaktive lektion

Opsummering

Du har lært om overførbare objekter:

Send en overførselsliste som det andet argument til postMessage.
ArrayBuffer (og nogle få andre) flyttes i stedet for at blive kopieret.
Afsenderens buffer bliver frakoblet bagefter.
Overfør et typet array via dets .buffer.
Brug det til store binære data, og klon små data.

Dernæst: anvendelser af workers og begrænsninger.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Transferable Objects” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Transferable Objects”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Transferable Objects”?

Flyt data effektivt uden at kopiere dem. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Transferable Objects”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy