Współdzielenie pamięci i tablic typowanych na granicy JS/WASM
Opanuj wydajną wymianę danych między JavaScript a WebAssembly z użyciem pamięci liniowej, widoków tablic typowanych i interfejsów ABI opartych na wskaźnikach.
Współdzielenie pamięci i tablic typowanych na granicy JS/WASM to bezpłatna lekcja WebAssembly (WASM) for High Performance Apps na CoddyKit. To lekcja 4 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.
The Boundary Problem
WASM functions only accept and return numbers. To pass strings, arrays, or structs you must work directly with WebAssembly.Memory — a single growable ArrayBuffer.
Linear Memory as a View
You read and write guest memory from JS by creating typed array views over the module memory buffer.
const mem = wasm.exports.memory;
const u8 = new Uint8Array(mem.buffer);
u8[0] = 65; // write a byte at offset 0Allocating Inside WASM
The guest owns its heap, so allocate there and get back a pointer.
const ptr = wasm.exports.malloc(len);
const view = new Uint8Array(wasm.exports.memory.buffer, ptr, len);
view.set(bytes);
wasm.exports.process(ptr, len);
wasm.exports.free(ptr);Passing Strings In
Encode a JS string to UTF-8 bytes, copy into guest memory, pass pointer + length.
const enc = new TextEncoder();
const bytes = enc.encode("hello");
const ptr = wasm.exports.malloc(bytes.length);
new Uint8Array(wasm.exports.memory.buffer, ptr, bytes.length).set(bytes);
wasm.exports.handle(ptr, bytes.length);Reading Strings Out
Given a pointer + length returned by the guest, slice the bytes and decode.
const u8 = new Uint8Array(wasm.exports.memory.buffer, ptr, len);
const str = new TextDecoder().decode(u8);The Detached Buffer Trap
When WASM memory grows, the old ArrayBuffer is detached and your views become invalid. Always recreate views after a call that may allocate.
Numeric Arrays
For Float64Array or Int32Array data, use the matching view and remember offsets are in bytes, so multiply the index by the element size.
const f64 = new Float64Array(wasm.exports.memory.buffer, ptr, count);Zero-Copy with SharedArrayBuffer
If both JS and WASM use a SharedArrayBuffer-backed memory, multiple threads can read the same data without copying — powerful but requires atomics for safety.
Binding Generators
Tools like wasm-bindgen (Rust) or Emscripten embind hide this pointer arithmetic, generating glue that marshals strings and objects automatically.
Endianness & Alignment
WASM memory is little-endian. Respect type alignment (e.g. 8-byte boundaries for f64) when laying out structs manually to avoid corrupt reads.
Ownership Rules
Decide who frees what. A common convention: the side that allocates also frees. Leaking guest allocations grows linear memory until memory.grow fails.
Quick Check
Why can a typed array view become invalid after calling a WASM function?
Recap
You learned to exchange data across the boundary via linear memory, pointer + length ABIs, and typed-array views. Watch the detached-buffer trap after growth, respect alignment, define clear ownership, and lean on binding generators for ergonomics.
Często zadawane pytania
Czy lekcja „Współdzielenie pamięci i tablic typowanych na granicy JS/WASM” jest bezpłatna?
Tak — pełny tekst „Współdzielenie pamięci i tablic typowanych na granicy JS/WASM” 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 „Współdzielenie pamięci i tablic typowanych na granicy JS/WASM”?
Opanuj wydajną wymianę danych między JavaScript a WebAssembly z użyciem pamięci liniowej, widoków tablic typowanych i interfejsów ABI opartych na wskaźnikach. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Współdzielenie pamięci i tablic typowanych na granicy JS/WASM”?
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
- Operacje asynchroniczne z WASM
- Niestandardowe callbacki JavaScript
- Obsługa błędów i wyjątków
- Współdzielenie pamięci i tablic typowanych na granicy JS/WASM