Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM
Kuasai pertukaran data yang efisien antara JavaScript dan WebAssembly menggunakan memori linear, tampilan larik bertipe, dan ABI berbasis penunjuk.
Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM adalah pelajaran WebAssembly (WASM) for High Performance Apps gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar WebAssembly (WASM) for High Performance Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar WebAssembly (WASM) for High Performance Apps dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM” gratis?
Ya — teks lengkap “Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus WebAssembly (WASM) for High Performance Apps, upgrade ke CoddyKit PRO. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM”?
Kuasai pertukaran data yang efisien antara JavaScript dan WebAssembly menggunakan memori linear, tampilan larik bertipe, dan ABI berbasis penunjuk. Kamu berlatih WebAssembly (WASM) for High Performance Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai WebAssembly (WASM) for High Performance Apps?
Tidak diperlukan pengalaman sebelumnya. WebAssembly (WASM) for High Performance Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran WebAssembly (WASM) for High Performance Apps ini?
Ya. Setiap pelajaran WebAssembly (WASM) for High Performance Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Operasi Asinkron dengan WASM
- Callback JavaScript Khusus
- Penanganan Kesalahan & Eksepsi
- Berbagi Memori dan Larik Bertipe di Seluruh Batas JS/WASM