JavaScript Academy · leksjon

Overførbare objekter

Flytt data effektivt uten å kopiere dem.

Leksjon 3 av 413 trinn

Overførbare objekter er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Kostnaden ved kloning

Structured cloning kopierer data byte for byte. For store buffere (bilder, lyd, store arrayer) er denne kopieringen treg og dobler minnebruken. Overførbare objekter løser dette ved å flytte eierskapet i stedet for å kopiere.

Hva kan overføres

Bare enkelte objekttyper kan overføres, og den viktigste er ArrayBuffer. Andre inkluderer MessagePort, ImageBitmap og OffscreenCanvas.

ArrayBuffer — rå binært minne
MessagePort — et endepunkt for en kanal
ImageBitmap — dekodede bildedata

Overføringslisten

postMessage tar imot et andre argument: en liste over overførbare objekter. Objektene i listen flyttes, ikke kopieres.

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

Eierskapet flyttes

Etter overføringen kan avsenderen ikke lenger bruke bufferen; den blir frakoblet (byteLength 0). Mottakeren eier nå det samme underliggende minnet, uten at det ble laget en kopi.

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

Overføre typede arrayer

Du overfører den underliggende ArrayBuffer-en til en typet array via egenskapen .buffer. Selve visningen kan ikke overføres, men bufferen kan.

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

Motta en overføring

Mottakeren leser det overførte objektet fra event.data, på akkurat samme måte som en klonet melding. Forskjellen er bare at ingen kopiering fant sted.

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

Sende resultater tilbake

Workeren kan overføre bufferen tilbake etter behandlingen, også uten kopiering, slik at eierskapet returneres til hovedtråden.

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

Overføring kontra kloning

For noen få kilobyte er forskjellen ubetydelig. For megabyte med binære data er overføring betydelig raskere og unngår en midlertidig økning i minnebruken. Velg det for store buffere.

Unngå feil ved bruk etter overføring

En vanlig feil er å lese bufferen etter at den er overført. Behandle alltid bufferen som borte så snart den står i overføringslisten.

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

Kombinere klonede og overførte data

Du kan sende et objekt som inneholder en buffer, og bare overføre denne bufferen. Objektet klones, mens bufferen som står på listen, flyttes.

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

Når bør overføring brukes

Bruk overførbare objekter til bilde-, lyd- og videobehandling, store numeriske beregninger og alle datastrømmer som flytter store binære datamengder mellom tråder. For små JSON-lignende data er vanlig kloning enklere og fungerer fint.

Hurtigsjekk

Test forståelsen din av overførbare objekter.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært om overførbare objekter:

Send en overføringsliste som det andre argumentet til postMessage.
ArrayBuffer (og noen få andre objekttyper) flyttes i stedet for å kopieres.
Avsenderens buffer blir frakoblet etterpå.
Overfør en typet array via .buffer.
Bruk dette for store binære data; klon små datamengder.

Deretter ser vi på bruksområder og begrensninger for workere.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Overførbare objekter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Overførbare objekter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Overførbare objekter»?

Flytt data effektivt uten å kopiere dem. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Overførbare objekter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy