WebAssembly (WASM) for High Performance Apps · Leçon

Modèle mémoire et gestion de la mémoire WASM

Comprenez le modèle de mémoire linéaire de WebAssembly ainsi que l’allocation, l’accès et la gestion de la mémoire dans les modules WASM.

Modèle mémoire et gestion de la mémoire WASM est une leçon WebAssembly (WASM) for High Performance Apps gratuite sur CoddyKit. Ceci est la leçon 2 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.

WASM Linear Memory: The Basics

WebAssembly uses a linear memory model. Think of it as a single, large, contiguous array of bytes, similar to how traditional programs manage memory.

This memory is separate from JavaScript's memory.
It's accessed by WASM modules as a flat address space, starting from address 0.
All data (integers, floats, strings, arrays) lives within this single memory block.

The `WebAssembly.Memory` Object

In JavaScript, WASM memory is represented by the WebAssembly.Memory object. This object holds the actual memory buffer.

You can create it:

When instantiating a WASM module, it can declare and create its own memory.
You can also pass an existing WebAssembly.Memory instance from JavaScript to the module.

const memory = new WebAssembly.Memory({
  initial: 1, // Start with 1 page (64KB)
  maximum: 10 // Max allowed 10 pages
});

// This 'memory' object is then passed to the
// WASM module during instantiation.

Memory Pages: The Unit of Size

WASM memory is organized into fixed-size units called pages. Each page is exactly 64 KiB (65,536 bytes) in size.

The initial and maximum properties of WebAssembly.Memory are always defined in terms of pages.
A WASM module might start with just 1 page, growing its memory as needed for efficiency.
This page-based system allows for efficient memory management and protection.

JavaScript's View into Memory

JavaScript cannot directly access WASM's linear memory using raw pointers. Instead, it gets an ArrayBuffer view of the memory.

You then use TypedArrays (like Uint8Array, Int32Array, Float64Array) or a DataView to read and write specific data types at specific offsets within that ArrayBuffer.

const memoryBuffer = instance.exports.memory.buffer;
const uint8Array = new Uint8Array(memoryBuffer); // Byte-level view
const int32Array = new Int32Array(memoryBuffer); // 4-byte integer view

Allocating Memory in C/WASM

When you compile C/C++ to WASM, functions like malloc allocate memory from WASM's linear memory. This example shows a C function that allocates space for an integer array.

It returns a memory offset (an integer) rather than a direct pointer, which JavaScript then uses.

#include <stdlib.h>
#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#else
#define EMSCRIPTEN_KEEPALIVE
#endif

EMSCRIPTEN_KEEPALIVE
int* allocate_int_array(int size) {
  int* arr = (int*) malloc(size * sizeof(int));
  if (arr) {
    for (int i = 0; i < size; ++i) {
      arr[i] = i * 10; // Initialize with some data
    }
  }
  return arr; // Returns memory offset
}

int main() {
  // Main function is often a placeholder for WASM modules
  return 0;
}

Accessing C-Allocated Memory from JS

After WASM allocates memory (e.g., using allocate_int_array), JavaScript can access it using the returned offset and a TypedArray.

The offset tells JS exactly where in the underlying ArrayBuffer the allocated data begins, allowing precise read/write operations.

// Assuming 'instance' is your WASM module instance
const offset = instance.exports.allocate_int_array(5);
const memoryBuffer = instance.exports.memory.buffer;

// Create an Int32Array view starting at the offset
const intArray = new Int32Array(memoryBuffer, offset, 5);

console.log(intArray[0]); // Expected: 0
console.log(intArray[1]); // Expected: 10
// ... and so on

Deallocating Memory with `free`

Just like in C, it's crucial to deallocate memory you've allocated using malloc to prevent memory leaks. The free function in WASM works similarly, releasing the memory back to the WASM runtime.

This C function frees a previously allocated memory block using its offset.

#include <stdlib.h>
#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#else
#define EMSCRIPTEN_KEEPALIVE
#endif

EMSCRIPTEN_KEEPALIVE
void free_wasm_memory(int* ptr) {
  if (ptr) {
    free(ptr); // Release the memory block
  }
}

int main() {
  return 0;
}

Dynamically Growing Memory

WASM memory isn't fixed; it can grow! The memory.grow(numPages) method, exposed on the WebAssembly.Memory object, allows you to increase the memory size by a specified number of pages.

This method returns the previous number of pages.
If grow fails (e.g., exceeds the maximum), it returns -1.
Important: Existing TypedArray views become invalid after a grow operation; you must create new ones from the updated memory.buffer.

const currentPages = instance.exports.memory.grow(1); // Add 1 page
console.log(`Memory grew from ${currentPages} pages.`);

// After growing, always recreate TypedArray views!
const newMemoryBuffer = instance.exports.memory.buffer;
const newUint8Array = new Uint8Array(newMemoryBuffer);

Memory Management Check

Which of the following statements about WebAssembly's linear memory model are TRUE?

Recap: WASM Memory Management

We've explored WebAssembly's linear memory model, a foundational concept for high-performance applications.

WASM memory is a contiguous byte array, separate from JS memory.
It's managed by the WebAssembly.Memory object and organized into 64 KiB pages.
JavaScript interacts with this memory using ArrayBuffer and TypedArrays to read and write data.
C functions like malloc and free operate within this WASM memory space, with `malloc` returning an offset.
Memory can be dynamically increased using memory.grow(), but requires re-creating JS views.

Understanding these concepts is key to efficient data exchange and memory handling in WASM applications.

Questions Fréquemment Posées

La leçon « Modèle mémoire et gestion de la mémoire WASM » est-elle gratuite ?

Oui — le texte complet de « Modèle mémoire et gestion de la mémoire 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 « Modèle mémoire et gestion de la mémoire WASM » ?

Comprenez le modèle de mémoire linéaire de WebAssembly ainsi que l’allocation, l’accès et la gestion de la mémoire dans les modules WASM. 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 2 sur 4.

Combien de temps prend la leçon « Modèle mémoire et gestion de la mémoire 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

Transmettre des structures de données complexes
Modèle mémoire et gestion de la mémoire WASM
Mémoire partagée et opérations atomiques
Faire croître et gérer la mémoire linéaire

← Retour à WebAssembly (WASM) for High Performance Apps