JavaScript Academy · Leçon

Objets transférables

Déplacez efficacement les données sans les copier.

Objets transférables est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Le coût du clonage

Le clonage structuré copie les données octet par octet. Pour les grands tampons (images, audio, grands tableaux), cette copie est lente et double l’utilisation de la mémoire. Les objets transférables résolvent ce problème en déplaçant la propriété au lieu de copier les données.

Ce qui peut être transféré

Seuls certains types d’objets sont transférables, notamment ArrayBuffer. Les autres comprennent MessagePort, ImageBitmap et OffscreenCanvas.

ArrayBuffer — mémoire binaire brute
MessagePort — point d’accès à un canal
ImageBitmap — données d’image décodées

La liste de transfert

postMessage accepte un deuxième argument : une liste d’objets transférables. Les objets de cette liste sont déplacés et non copiés.

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

La propriété est transférée

Après le transfert, le côté émetteur ne peut plus utiliser le tampon ; celui-ci devient détaché (byteLength égal à 0). Le côté récepteur possède alors la même mémoire sous-jacente, sans qu’aucune copie n’ait été effectuée.

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

Transférer des tableaux typés

Vous transférez l’ArrayBuffer sous-jacent d’un tableau typé via sa propriété .buffer. La vue elle-même n’est pas transférable, mais son tampon l’est.

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

Réception d’un transfert

Le côté récepteur lit l’objet transféré depuis event.data, exactement comme pour un message cloné. La seule différence est qu’aucune copie n’a été effectuée.

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

Renvoyer les résultats

Après le traitement, le worker peut retransférer le tampon, toujours sans copie, afin d’en rendre la propriété au thread principal.

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

Performances du transfert et du clonage

Pour quelques kilo-octets, la différence est négligeable. Pour plusieurs mégaoctets de données binaires, le transfert est nettement plus rapide et évite un pic d’utilisation de la mémoire. Utilisez-le pour les grands tampons.

Éviter les erreurs d’utilisation après transfert

Une erreur courante consiste à lire le tampon après l’avoir transféré. Considérez toujours que le tampon n’est plus disponible dès qu’il apparaît dans la liste de transfert.

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

Combiner données clonées et transférées

Vous pouvez envoyer un objet qui contient un tampon et ne transférer que ce tampon. L’objet est cloné ; le tampon indiqué est déplacé.

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

Quand utiliser le transfert

Utilisez les objets transférables pour le traitement des images, de l’audio et de la vidéo, les calculs numériques importants et tout pipeline qui déplace de grands blocs binaires entre les threads. Pour les petites données semblables à du JSON, le clonage simple est plus facile et convient parfaitement.

Vérification rapide

Testez votre compréhension des objets transférables.

Récapitulatif

Vous avez appris à utiliser les objets transférables :

Transmettez une liste de transfert comme deuxième argument à postMessage.
ArrayBuffer (ainsi que quelques autres objets) est déplacé au lieu d’être copié.
Le tampon de l’émetteur devient ensuite détaché.
Transférez un tableau typé via son .buffer.
Utilisez cette technique pour les grandes données binaires et le clonage pour les petites données.

Ensuite, les cas d’utilisation et les limites des workers.

Questions Fréquemment Posées

La leçon « Objets transférables » est-elle gratuite ?

Oui — le texte complet de « Objets transférables » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Objets transférables » ?

Déplacez efficacement les données sans les copier. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Objets transférables » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy