Partager la mémoire et les tableaux typés entre JS et WASM
Maîtrisez les échanges de données efficaces entre JavaScript et WebAssembly grâce à la mémoire linéaire, aux vues de tableaux typés et aux ABI fondées sur des pointeurs.
Partager la mémoire et les tableaux typés entre JS et WASM est une leçon WebAssembly (WASM) for High Performance Apps gratuite sur CoddyKit. Ceci est la leçon 4 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 WebAssembly (WASM) for High Performance Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
The Boundary Problem
WASM functions only accept and return numbers. To pass strings, arrays, or structs you must work directly with WebAssembly.Memory — a single growable ArrayBuffer.
Linear Memory as a View
You read and write guest memory from JS by creating typed array views over the module memory buffer.
const mem = wasm.exports.memory;
const u8 = new Uint8Array(mem.buffer);
u8[0] = 65; // write a byte at offset 0Allocating Inside WASM
The guest owns its heap, so allocate there and get back a pointer.
const ptr = wasm.exports.malloc(len);
const view = new Uint8Array(wasm.exports.memory.buffer, ptr, len);
view.set(bytes);
wasm.exports.process(ptr, len);
wasm.exports.free(ptr);Passing Strings In
Encode a JS string to UTF-8 bytes, copy into guest memory, pass pointer + length.
const enc = new TextEncoder();
const bytes = enc.encode("hello");
const ptr = wasm.exports.malloc(bytes.length);
new Uint8Array(wasm.exports.memory.buffer, ptr, bytes.length).set(bytes);
wasm.exports.handle(ptr, bytes.length);Reading Strings Out
Given a pointer + length returned by the guest, slice the bytes and decode.
const u8 = new Uint8Array(wasm.exports.memory.buffer, ptr, len);
const str = new TextDecoder().decode(u8);The Detached Buffer Trap
When WASM memory grows, the old ArrayBuffer is detached and your views become invalid. Always recreate views after a call that may allocate.
Numeric Arrays
For Float64Array or Int32Array data, use the matching view and remember offsets are in bytes, so multiply the index by the element size.
const f64 = new Float64Array(wasm.exports.memory.buffer, ptr, count);Zero-Copy with SharedArrayBuffer
If both JS and WASM use a SharedArrayBuffer-backed memory, multiple threads can read the same data without copying — powerful but requires atomics for safety.
Binding Generators
Tools like wasm-bindgen (Rust) or Emscripten embind hide this pointer arithmetic, generating glue that marshals strings and objects automatically.
Endianness & Alignment
WASM memory is little-endian. Respect type alignment (e.g. 8-byte boundaries for f64) when laying out structs manually to avoid corrupt reads.
Ownership Rules
Decide who frees what. A common convention: the side that allocates also frees. Leaking guest allocations grows linear memory until memory.grow fails.
Quick Check
Why can a typed array view become invalid after calling a WASM function?
Recap
You learned to exchange data across the boundary via linear memory, pointer + length ABIs, and typed-array views. Watch the detached-buffer trap after growth, respect alignment, define clear ownership, and lean on binding generators for ergonomics.
Questions Fréquemment Posées
La leçon « Partager la mémoire et les tableaux typés entre JS et WASM » est-elle gratuite ?
Oui — le texte complet de « Partager la mémoire et les tableaux typés entre JS et WASM » 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 WebAssembly (WASM) for High Performance Apps, passe à CoddyKit PRO. Le cours WebAssembly (WASM) for High Performance Apps comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Partager la mémoire et les tableaux typés entre JS et WASM » ?
Maîtrisez les échanges de données efficaces entre JavaScript et WebAssembly grâce à la mémoire linéaire, aux vues de tableaux typés et aux ABI fondées sur des pointeurs. Tu pratiques WebAssembly (WASM) for High Performance Apps 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 WebAssembly (WASM) for High Performance Apps ?
Aucune expérience préalable n'est requise. WebAssembly (WASM) for High Performance Apps 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 4 sur 4.
Combien de temps prend la leçon « Partager la mémoire et les tableaux typés entre JS et WASM » ?
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 WebAssembly (WASM) for High Performance Apps ?
Oui. Chaque leçon WebAssembly (WASM) for High Performance Apps 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
- Opérations asynchrones avec WASM
- Rappels JavaScript personnalisés
- Gestion des erreurs et exceptions
- Partager la mémoire et les tableaux typés entre JS et WASM