JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma
Doğrusal bellek, türlendirilmiş dizi görünümleri ve işaretçi tabanlı ABI'ler kullanarak JavaScript ile WebAssembly arasında verimli veri alışverişinde ustalaşın.
JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma, CoddyKit'te ücretsiz bir WebAssembly (WASM) for High Performance Apps dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, WebAssembly (WASM) for High Performance Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. WebAssembly (WASM) for High Performance Apps kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma” dersi ücretsiz mi?
Evet — “JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve WebAssembly (WASM) for High Performance Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. WebAssembly (WASM) for High Performance Apps kursu toplamda 4 dersten oluşur.
“JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma” dersinde ne öğreneceğim?
Doğrusal bellek, türlendirilmiş dizi görünümleri ve işaretçi tabanlı ABI'ler kullanarak JavaScript ile WebAssembly arasında verimli veri alışverişinde ustalaşın. WebAssembly (WASM) for High Performance Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
WebAssembly (WASM) for High Performance Apps öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te WebAssembly (WASM) for High Performance Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu WebAssembly (WASM) for High Performance Apps dersinde kod yazıp çalıştırabilir miyim?
Evet. Her WebAssembly (WASM) for High Performance Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- WASM ile Eşzamansız İşlemler
- Özel JavaScript Geri Çağrıları
- Hata İşleme ve Özel Durumlar
- JS/WASM Sınırında Bellek ve Türlendirilmiş Dizileri Paylaşma