WebAssembly (WASM) voor performante toepassingen · Les

WASM-geheugenmodel en -beheer

Krijg inzicht in het lineaire geheugenmodel van WebAssembly en in de manier waarop geheugen binnen WASM-modules wordt toegewezen, benaderd en beheerd.

Les 2 van 410 stappen

WASM-geheugenmodel en -beheer is een gratis WebAssembly (WASM) voor performante toepassingen-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject WebAssembly (WASM) voor performante toepassingen. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.

Lineair WASM-geheugen: de basis

WebAssembly gebruikt een lineair geheugenmodel. Je kunt het zien als één grote, aaneengesloten array van bytes, vergelijkbaar met de manier waarop traditionele programma's het geheugen beheren.

Dit geheugen staat los van het geheugen van JavaScript.
WASM-modules benaderen het als een vlakke adresruimte die begint op adres 0.
Alle gegevens (gehele getallen, kommagetallen, tekenreeksen, arrays) bevinden zich in dit ene geheugenblok.

Het object `WebAssembly.Memory`

In JavaScript wordt WASM-geheugen weergegeven door het object WebAssembly.Memory. Dit object bevat de daadwerkelijke geheugenbuffer.

Je kunt deze als volgt maken:

Bij het instantiëren van een WASM-module kan de module zijn eigen geheugen declareren en maken.
Je kunt ook een bestaande instantie van WebAssembly.Memory vanuit JavaScript aan de module doorgeven.

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.

Geheugenpagina's: de eenheid van grootte

WASM-geheugen is georganiseerd in eenheden met een vaste grootte die pagina's worden genoemd. Elke pagina is precies 64 KiB (65.536 bytes) groot.

De eigenschappen initial en maximum van WebAssembly.Memory worden altijd uitgedrukt in pagina's.
Een WASM-module kan beginnen met slechts 1 pagina en het geheugen indien nodig uitbreiden voor efficiëntie.
Dit systeem op basis van pagina's maakt efficiënt geheugenbeheer en een goede beveiliging mogelijk.

JavaScript-weergave van het geheugen

JavaScript kan het lineaire geheugen van WASM niet rechtstreeks benaderen met onbewerkte pointers. In plaats daarvan krijgt het een ArrayBuffer-weergave van het geheugen.

Vervolgens gebruik je TypedArrays (zoals Uint8Array, Int32Array, Float64Array) of een DataView om specifieke gegevenstypen op specifieke offsets binnen die ArrayBuffer te lezen en te schrijven.

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

Geheugen toewijzen in C/WASM

Wanneer je C/C++ naar WASM compileert, wijzen functies zoals malloc geheugen toe vanuit het lineaire geheugen van WASM. Dit voorbeeld toont een C-functie die ruimte toewijst voor een array met gehele getallen.

De functie retourneert een geheugen-offset (een geheel getal) in plaats van een directe pointer, die JavaScript vervolgens gebruikt.

#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;
}

In C toegewezen geheugen benaderen vanuit JS

Nadat WASM geheugen heeft toegewezen (bijvoorbeeld met allocate_int_array), kan JavaScript dit benaderen met de geretourneerde offset en een TypedArray.

De offset vertelt JS precies waar de toegewezen gegevens in de onderliggende ArrayBuffer beginnen, zodat je nauwkeurig kunt lezen en schrijven.

// 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

Geheugen vrijgeven met `free`

Net als in C is het cruciaal om geheugen dat je met malloc hebt toegewezen weer vrij te geven om geheugenlekken te voorkomen. De functie free in WASM werkt op vergelijkbare wijze en geeft het geheugen terug aan de WASM-runtime.

Deze C-functie maakt een eerder toegewezen geheugenblok vrij met behulp van de offset ervan.

#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;
}

Geheugen dynamisch uitbreiden

WASM-geheugen heeft geen vaste grootte; het kan groeien! Met de methode memory.grow(numPages), die beschikbaar is op het object WebAssembly.Memory, kun je de geheugengrootte met een opgegeven aantal pagina's vergroten.

Deze methode retourneert het vorige aantal pagina's.
Als grow mislukt (bijvoorbeeld omdat de maximum wordt overschreden), retourneert de methode -1.
Belangrijk: Bestaande TypedArray-weergaven worden ongeldig nadat het geheugen is uitgebreid; je moet nieuwe weergaven maken vanuit het bijgewerkte 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);

Controle van geheugenbeheer

Welke van de volgende uitspraken over het lineaire geheugenmodel van WebAssembly zijn WAAR?

Beantwoord dit in de interactieve les

Samenvatting: WASM-geheugenbeheer

We hebben het lineaire geheugenmodel van WebAssembly verkend, een fundamenteel concept voor toepassingen met hoge prestaties.

WASM-geheugen is een aaneengesloten array van bytes die losstaat van het JS-geheugen.
Het wordt beheerd door het object WebAssembly.Memory en is georganiseerd in pagina's van 64 KiB.
JavaScript gebruikt ArrayBuffer en TypedArrays om gegevens in dit geheugen te lezen en te schrijven.
C-functies zoals malloc en free werken binnen deze WASM-geheugenruimte, waarbij `malloc` een offset retourneert.
Het geheugen kan dynamisch worden uitgebreid met memory.grow(), maar daarvoor moeten de JS-weergaven opnieuw worden gemaakt.

Als je deze concepten begrijpt, kun je efficiënt gegevens uitwisselen en geheugen beheren in WASM-toepassingen.

Gratis beginnen

Leer WebAssembly (WASM) voor performante toepassingen met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “WASM-geheugenmodel en -beheer” gratis?

Ja — de volledige tekst van “WASM-geheugenmodel en -beheer” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus WebAssembly (WASM) voor performante toepassingen wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.

Wat leer ik in “WASM-geheugenmodel en -beheer”?

Krijg inzicht in het lineaire geheugenmodel van WebAssembly en in de manier waarop geheugen binnen WASM-modules wordt toegewezen, benaderd en beheerd. Je oefent met WebAssembly (WASM) voor performante toepassingen door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met WebAssembly (WASM) voor performante toepassingen te beginnen?

Ervaring vooraf is niet nodig. WebAssembly (WASM) voor performante toepassingen op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “WASM-geheugenmodel en -beheer”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over WebAssembly (WASM) voor performante toepassingen?

Ja. Elke les over WebAssembly (WASM) voor performante toepassingen bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar WebAssembly (WASM) voor performante toepassingen