WebAssembly (WASM) för högpresterande appar · Lektion

WASM:s minnesmodell och minneshantering

Förstå WebAssemblys linjära minnesmodell och hur minne allokeras, nås och hanteras i WASM-moduler

Lektion 2 av 410 steg

WASM:s minnesmodell och minneshantering är en gratis lektion i WebAssembly (WASM) för högpresterande appar på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för WebAssembly (WASM) för högpresterande appar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i WebAssembly (WASM) för högpresterande appar innehåller totalt 4 lektioner.

Linjärt WASM-minne: grunderna

WebAssembly använder en linjär minnesmodell. Tänk på den som en enda stor, sammanhängande array med bytes, ungefär som traditionella program hanterar minne.

Det här minnet är separat från JavaScripts minne.
WASM-moduler får åtkomst till det som ett platt adressutrymme som börjar på adress 0.
Alla data (heltal, flyttal, strängar, arrayer) finns i detta enda minnesblock.

Objektet `WebAssembly.Memory`

I JavaScript representeras WASM-minnet av objektet WebAssembly.Memory. Objektet innehåller den faktiska minnesbufferten.

Ni kan skapa det:

När en WASM-modul instansieras kan den deklarera och skapa sitt eget minne.
Ni kan också skicka en befintlig instans av WebAssembly.Memory från JavaScript till modulen.

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.

Minnespages: storleksenheten

WASM-minnet är organiserat i enheter med fast storlek som kallas pages. Varje page är exakt 64 KiB (65 536 bytes) stor.

Egenskaperna initial och maximum för WebAssembly.Memory anges alltid i pages.
En WASM-modul kan börja med endast 1 page och utöka minnet efter behov för att vara effektiv.
Detta page-baserade system möjliggör effektiv minneshantering och minnesskydd.

JavaScripts vy över minnet

JavaScript kan inte få direkt åtkomst till WASM:s linjära minne med råpekare. I stället får JavaScript en vy av minnet i form av en ArrayBuffer.

Sedan använder ni TypedArrays (som Uint8Array, Int32Array, Float64Array) eller en DataView för att läsa och skriva specifika datatyper vid specifika positioner i denna ArrayBuffer.

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

Allokera minne i C/WASM

När ni kompilerar C/C++ till WASM allokerar funktioner som malloc minne från WASM:s linjära minne. Det här exemplet visar en C-funktion som allokerar utrymme för en heltalsarray.

Den returnerar en minnes< b>offset (ett heltal) i stället för en direkt pekare, som JavaScript sedan använder.

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

Åtkomst till C-allokerat minne från JS

När WASM har allokerat minne (till exempel med allocate_int_array) kan JavaScript få åtkomst till det med hjälp av den returnerade offseten och en TypedArray.

Offseten anger exakt var i den underliggande ArrayBuffer som de allokerade datana börjar, vilket möjliggör precisa läs- och skrivoperationer.

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

Avallokera minne med `free`

Precis som i C är det viktigt att avallokera minne som ni har allokerat med malloc för att förhindra minnesläckor. Funktionen free i WASM fungerar på liknande sätt och återlämnar minnet till WASM-körmiljön.

Den här C-funktionen frigör ett tidigare allokerat minnesblock med hjälp av dess 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;
}

Utöka minnet dynamiskt

WASM-minnet har inte en fast storlek – det kan utökas! Metoden memory.grow(numPages), som exponeras på objektet WebAssembly.Memory, gör det möjligt att öka minnesstorleken med ett angivet antal pages.

Metoden returnerar det tidigare antalet pages.
Om grow misslyckas (till exempel om maximum överskrids) returnerar den -1.
Viktigt: Befintliga TypedArray-vyer blir ogiltiga efter en utökning. Ni måste skapa nya vyer från den uppdaterade 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);

Kontroll av minneshantering

Vilka av följande påståenden om WebAssemblys linjära minnesmodell är SANT?

Besvara frågan i den interaktiva lektionen

Sammanfattning: WASM-minneshantering

Vi har utforskat WebAssemblys linjära minnesmodell, ett grundläggande koncept för applikationer med hög prestanda.

WASM-minnet är en sammanhängande bytearray som är separat från JS-minnet.
Det hanteras av objektet WebAssembly.Memory och är organiserat i pages på 64 KiB.
JavaScript interagerar med minnet med hjälp av ArrayBuffer och TypedArrays för att läsa och skriva data.
C-funktioner som malloc och free arbetar i detta WASM-minnesutrymme, där `malloc` returnerar en offset.
Minnet kan utökas dynamiskt med memory.grow(), men då måste JS-vyerna skapas på nytt.

Att förstå dessa koncept är viktigt för effektivt datautbyte och effektiv minneshantering i WASM-applikationer.

Gratis att börja

Lär dig WebAssembly (WASM) för högpresterande appar med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”WASM:s minnesmodell och minneshantering” gratis?

Ja – hela texten till ”WASM:s minnesmodell och minneshantering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i WebAssembly (WASM) för högpresterande appar, kan Ni uppgradera till CoddyKit PRO. Kursen i WebAssembly (WASM) för högpresterande appar innehåller totalt 4 lektioner.

Vad lär jag mig i ”WASM:s minnesmodell och minneshantering”?

Förstå WebAssemblys linjära minnesmodell och hur minne allokeras, nås och hanteras i WASM-moduler Ni övar på WebAssembly (WASM) för högpresterande appar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig WebAssembly (WASM) för högpresterande appar?

Du behöver inga förkunskaper. Utbildningen i WebAssembly (WASM) för högpresterande appar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”WASM:s minnesmodell och minneshantering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här WebAssembly (WASM) för högpresterande appar-lektionen?

Ja. Varje WebAssembly (WASM) för högpresterande appar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till WebAssembly (WASM) för högpresterande appar