JavaScript Academy · Lección

Objetos transferibles

Mueva datos eficazmente sin copiarlos.

Objetos transferibles es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

El coste de la clonación

La clonación estructurada copia los datos byte a byte. En el caso de buffers grandes (imágenes, audio o arrays grandes), esta copia es lenta y duplica el uso de memoria. Los objetos transferibles resuelven este problema al mover la propiedad en lugar de copiar los datos.

Qué se puede transferir

Solo ciertos tipos de objetos son transferibles, y el más importante es ArrayBuffer. Otros son MessagePort, ImageBitmap y OffscreenCanvas.

ArrayBuffer — memoria binaria sin procesar
MessagePort — un extremo de un canal
ImageBitmap — datos de imagen decodificados

La lista de transferencia

postMessage acepta un segundo argumento: una lista de objetos transferibles. Los objetos incluidos en esa lista se mueven, no se copian.

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

La propiedad cambia de lado

Después de la transferencia, el lado emisor ya no puede usar el buffer; este queda desvinculado (byteLength 0). El lado receptor pasa a ser propietario de la misma memoria subyacente, sin realizar ninguna copia.

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

Transferencia de arrays tipados

Debe transferir el ArrayBuffer subyacente de un array tipado mediante su propiedad .buffer. La vista no es transferible, pero su buffer sí lo es.

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

Recepción de una transferencia

El lado receptor lee el objeto transferido desde event.data, exactamente igual que un mensaje clonado. La única diferencia es que no se ha realizado ninguna copia.

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

Envío de resultados de vuelta

El worker puede transferir el buffer de vuelta después de procesarlo, de nuevo sin copias, para devolver la propiedad al hilo principal.

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

Rendimiento de transferir frente a clonar

En el caso de unos pocos kilobytes, la diferencia es insignificante. Con varios megabytes de datos binarios, la transferencia es mucho más rápida y evita un aumento repentino del uso de memoria. Recurra a ella con buffers grandes.

Cómo evitar errores de uso tras la transferencia

Un error habitual es leer el buffer después de transferirlo. Trate siempre el buffer como inexistente en cuanto aparezca en la lista de transferencia.

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

Combinación de datos clonados y transferidos

Puede enviar un objeto que contenga un buffer y transferir únicamente ese buffer. El objeto se clona; el buffer incluido en la lista se mueve.

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

Cuándo usar la transferencia

Use objetos transferibles para procesar imágenes, audio o vídeo, realizar cálculos numéricos grandes y en cualquier canalización que mueva grandes bloques binarios entre hilos. Para datos pequeños similares a JSON, la clonación normal es más sencilla y adecuada.

Comprobación rápida

Compruebe cuánto ha entendido sobre los objetos transferibles.

Repaso

Ha aprendido sobre los objetos transferibles:

Pase una lista de transferencia como segundo argumento de postMessage.
ArrayBuffer (y algunos otros objetos) se mueve en lugar de copiarse.
El buffer del emisor queda desvinculado después.
Transfiera un array tipado mediante su propiedad .buffer.
Úselo para datos binarios grandes; clone los datos pequeños.

A continuación, casos de uso y limitaciones de los workers.

Preguntas frecuentes

¿La lección «Objetos transferibles» es gratis?

Sí — el texto completo de «Objetos transferibles» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Objetos transferibles»?

Mueva datos eficazmente sin copiarlos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Objetos transferibles»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy