0Pricing
WebAssembly (WASM) for High Performance Apps · Lekcja

Model pamięci WASM i zarządzanie nią

Poznaj liniowy model pamięci WebAssembly oraz sposób przydzielania, uzyskiwania dostępu i zarządzania pamięcią w modułach WASM

Model pamięci WASM i zarządzanie nią to bezpłatna lekcja WebAssembly (WASM) for High Performance Apps na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej WebAssembly (WASM) for High Performance Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs WebAssembly (WASM) for High Performance Apps zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Model pamięci WASM i zarządzanie nią” jest bezpłatna?

Tak — pełny tekst „Model pamięci WASM i zarządzanie nią” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu WebAssembly (WASM) for High Performance Apps, przejdź na CoddyKit PRO. Kurs WebAssembly (WASM) for High Performance Apps zawiera 4 lekcji w sumie.

Co nauczysz się w „Model pamięci WASM i zarządzanie nią”?

Poznaj liniowy model pamięci WebAssembly oraz sposób przydzielania, uzyskiwania dostępu i zarządzania pamięcią w modułach WASM Ćwiczysz WebAssembly (WASM) for High Performance Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć WebAssembly (WASM) for High Performance Apps?

Nie wymagamy żadnego doświadczenia. WebAssembly (WASM) for High Performance Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Model pamięci WASM i zarządzanie nią”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji WebAssembly (WASM) for High Performance Apps?

Tak. Każda lekcja WebAssembly (WASM) for High Performance Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Przekazywanie złożonych struktur danych
  2. Model pamięci WASM i zarządzanie nią
  3. Pamięć współdzielona i operacje atomowe
  4. Rozszerzanie i zarządzanie pamięcią liniową
← Powrót do WebAssembly (WASM) for High Performance Apps