JavaScript Academy · Lektion

Överförbara objekt

Flytta data effektivt utan att kopiera den.

Lektion 3 av 413 steg

Överförbara objekt är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Kostnaden för kloning

Strukturerad kloning kopierar data byte för byte. För stora buffertar (bilder, ljud och stora arrayer) är kopieringen långsam och fördubblar minnesanvändningen. Överförbara objekt löser detta genom att flytta ägarskapet i stället för att kopiera.

Vad kan överföras

Endast vissa objekttyper kan överföras, framför allt ArrayBuffer. Andra är MessagePort, ImageBitmap och OffscreenCanvas.

ArrayBuffer — rå binärminnesdata
MessagePort — en kanaländpunkt
ImageBitmap — avkodad bilddata

Överföringslistan

postMessage accepterar ett andra argument: en lista med överförbara objekt. Objekt i listan flyttas i stället för att kopieras.

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

Ägarskapet flyttas

Efter överföringen kan den sändande sidan inte längre använda bufferten; den blir frånkopplad (byteLength 0). Den mottagande sidan äger nu samma underliggande minne, utan att någon kopia har skapats.

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

Överföra typade arrayer

Du överför den underliggande ArrayBuffer för en typad array via egenskapen .buffer. Själva vyn kan inte överföras, men dess buffert kan det.

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

Ta emot en överföring

Den mottagande sidan läser det överförda objektet från event.data, precis som vid ett klonat meddelande. Den enda skillnaden är att ingen kopiering har skett.

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

Skicka tillbaka resultat

Workern kan överföra bufferten tillbaka efter bearbetningen, återigen utan kopiering, och lämna tillbaka ägarskapet till huvudtråden.

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

Prestanda: överföring jämfört med kloning

För några få kilobyte är skillnaden försumbar. För megabyte med binärdata är överföring mycket snabbare och undviker en plötslig ökning av minnesanvändningen. Använd överföring för stora buffertar.

Undvika fel efter överföring

Ett vanligt misstag är att läsa bufferten efter att den har överförts. Behandla alltid bufferten som försvunnen så snart den finns i överföringslistan.

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

Kombinera klonade och överförda data

Du kan skicka ett objekt som innehåller en buffert och bara överföra den bufferten. Objektet klonas; den angivna bufferten flyttas.

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

När överföring ska användas

Använd överförbara objekt för bearbetning av bilder, ljud och video, stora numeriska beräkningar och alla datapipelines som flyttar stora binära datablock mellan trådar. För små JSON-liknande datamängder är vanlig kloning enklare och tillräcklig.

Snabbtest

Testa dina kunskaper om överförbara objekt.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig om överförbara objekt:

Skicka en överföringslista som det andra argumentet till postMessage.
ArrayBuffer (och några andra objekt) flyttas i stället för att kopieras.
Avsändarens buffert blir frånkopplad efteråt.
Överför en typad array via dess .buffer.
Använd överföring för stora binära datamängder och kloning för små datamängder.

Nästa avsnitt handlar om användningsområden och begränsningar för workers.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Överförbara objekt” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Överförbara objekt”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Överförbara objekt”?

Flytta data effektivt utan att kopiera den. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Överförbara objekt”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy