JavaScript Academy · Lektion

Übertragbare Objekte

Verschieben Sie Daten effizient, ohne sie zu kopieren.

Übertragbare Objekte ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Kosten des Kopierens

Structured Clone kopiert Daten Byte für Byte. Bei großen Puffern (Bildern, Audiodaten, großen Arrays) ist dieses Kopieren langsam und verdoppelt den Speicherbedarf. Transferierbare Objekte lösen dieses Problem, indem sie den Besitz übertragen, anstatt zu kopieren.

Was übertragen werden kann

Nur bestimmte Objekttypen sind übertragbar, insbesondere ArrayBuffer. Weitere Beispiele sind MessagePort, ImageBitmap und OffscreenCanvas.

ArrayBuffer — roher Binärspeicher
MessagePort — ein Kanalendpunkt
ImageBitmap — dekodierte Bilddaten

Die Transferliste

postMessage akzeptiert ein zweites Argument: eine Liste transferierbarer Objekte. Objekte in dieser Liste werden übertragen und nicht kopiert.

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

Der Besitz wird übertragen

Nach der Übertragung kann die sendende Seite den Puffer nicht mehr verwenden; er wird detached (byteLength 0). Die empfangende Seite besitzt nun denselben zugrunde liegenden Speicher, ohne dass eine Kopie erstellt wurde.

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

Typisierte Arrays übertragen

Sie übertragen den zugrunde liegenden ArrayBuffer eines typisierten Arrays über dessen Eigenschaft .buffer. Die Ansicht selbst ist nicht übertragbar, ihr Puffer jedoch schon.

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

Eine Übertragung empfangen

Die empfangende Seite liest das übertragene Objekt aus event.data, genau wie bei einer kopierten Nachricht. Der einzige Unterschied besteht darin, dass keine Kopie erstellt wurde.

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

Ergebnisse zurücksenden

Der Worker kann den Puffer nach der Verarbeitung erneut ohne Kopieren übertragen und damit den Besitz an den Hauptthread zurückgeben.

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

Leistung: Übertragen oder Kopieren

Bei einigen Kilobyte ist der Unterschied vernachlässigbar. Bei mehreren Megabyte Binärdaten ist die Übertragung deutlich schneller und vermeidet einen vorübergehenden Anstieg des Speicherbedarfs. Verwenden Sie sie für große Puffer.

Fehler durch Verwendung nach der Übertragung vermeiden

Ein häufiger Fehler besteht darin, den Puffer nach seiner Übertragung zu lesen. Behandeln Sie den Puffer immer als nicht mehr verfügbar, sobald er in der Transferliste erscheint.

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

Kopierte und übertragene Daten kombinieren

Sie können ein Objekt senden, das einen Puffer enthält, und nur diesen Puffer übertragen. Das Objekt wird kopiert, der aufgeführte Puffer wird übertragen.

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

Wann Sie Übertragungen verwenden sollten

Verwenden Sie transferierbare Objekte für die Verarbeitung von Bildern, Audio und Video, für umfangreiche numerische Berechnungen und für jede Pipeline, die große Binärdaten zwischen Threads bewegt. Für kleine JSON-ähnliche Daten ist einfaches Kopieren unkomplizierter und völlig ausreichend.

Kurzer Test

Testen Sie Ihr Verständnis transferierbarer Objekte.

Zusammenfassung

Sie haben transferierbare Objekte gelernt:

Übergeben Sie eine Transferliste als zweites Argument an postMessage.
ArrayBuffer (und einige weitere Objekte) werden übertragen, anstatt kopiert zu werden.
Der Puffer der sendenden Seite wird anschließend detached.
Übertragen Sie ein typisiertes Array über dessen .buffer.
Verwenden Sie Übertragungen für große Binärdaten und Kopien für kleine Daten.

Als Nächstes geht es um Einsatzmöglichkeiten und Einschränkungen von Workern.

Häufig gestellte Fragen

Ist die Lektion „Übertragbare Objekte“ kostenlos?

Ja — der vollständige Text von „Übertragbare Objekte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Übertragbare Objekte“?

Verschieben Sie Daten effizient, ohne sie zu kopieren. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Übertragbare Objekte“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy