WebAssembly (WASM) for High Performance Apps · レッスン

WASMのメモリモデルと管理

WebAssemblyの線形メモリモデルと、WASMモジュール内でのメモリの割り当て、アクセス、管理方法を理解します

「WASMのメモリモデルと管理」はCoddyKit上の無料WebAssembly (WASM) for High Performance Appsレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWebAssembly (WASM) for High Performance Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

よくある質問

「WASMのメモリモデルと管理」レッスンは無料ですか？

はい。「WASMのメモリモデルと管理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、WebAssembly (WASM) for High Performance Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。

「WASMのメモリモデルと管理」で何を学びますか？

WebAssemblyの線形メモリモデルと、WASMモジュール内でのメモリの割り当て、アクセス、管理方法を理解しますブラウザで直接実行するハンズオンコードでWebAssembly (WASM) for High Performance Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

WebAssembly (WASM) for High Performance Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWebAssembly (WASM) for High Performance Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「WASMのメモリモデルと管理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWebAssembly (WASM) for High Performance Appsレッスンでコードを書いて実行できますか？

はい。すべてのWebAssembly (WASM) for High Performance Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← WebAssembly (WASM) for High Performance Appsに戻る