2nd/10_Wiki/Topic_Programming/Programming & Language/SharedArrayBuffer로 스레드 간 메모리 공유 효율 높이기.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-sharedarraybuffer로-스레드-간-메모리-공유-	SharedArrayBuffer로 스레드 간 메모리 공유 효율 높이기	10_Wiki/Topics	verified	self	SAB SharedArrayBuffer Shared Memory JS	none	A	0.9	applied	javascript web-worker concurrency performance		2026-05-10	pending	language framework JavaScript Web Workers

SharedArrayBuffer로 스레드 간 메모리 공유 효율 높이기

매 한 줄

"매 zero-copy shared memory between JS threads". SharedArrayBuffer (SAB) 는 main thread + Web Worker 간 동일 raw bytes 를 공유. postMessage structured clone 의 copy 비용 제거 + Atomics 로 race-free coordination 가능.

매 핵심

매 동작 모델

• 매 buffer instance 는 multiple threads 에서 동일 backing store 참조.
• 매 TypedArray view (Int32Array, Float64Array) 로 typed access.
• 매 Atomics.load/store/add 로 atomic ops.
• 매 Atomics.wait/notify 로 futex-like blocking sync.

매 vs ArrayBuffer

• 매 ArrayBuffer: postMessage 시 structured clone (copy) 또는 transfer (ownership move).
• 매 SharedArrayBuffer: postMessage 시 reference 전달, 양쪽 동시 access.

매 응용

1. WASM linear memory 공유 (multi-threaded WASM).
2. 매 large image/audio buffer worker 처리 (zero-copy).
3. Lock-free queue / ring buffer 구현.

💻 패턴

Worker 에 SAB 전달

// main.js
const sab = new SharedArrayBuffer(1024);
const view = new Int32Array(sab);
const worker = new Worker('worker.js');
worker.postMessage({ sab });

// worker.js
self.onmessage = ({ data }) => {
  const view = new Int32Array(data.sab);
  Atomics.store(view, 0, 42);
  Atomics.notify(view, 0, 1);
};

Atomic counter

const sab = new SharedArrayBuffer(4);
const counter = new Int32Array(sab);
Atomics.add(counter, 0, 1); // race-free increment
const value = Atomics.load(counter, 0);

Producer / Consumer wait+notify

// consumer
Atomics.wait(view, 0, 0); // sleep until view[0] != 0
const data = Atomics.load(view, 0);

// producer
Atomics.store(view, 0, 99);
Atomics.notify(view, 0, 1); // wake 1 waiter

Lock (spinlock)

function lock(view, idx) {
  while (Atomics.compareExchange(view, idx, 0, 1) !== 0) {
    Atomics.wait(view, idx, 1);
  }
}
function unlock(view, idx) {
  Atomics.store(view, idx, 0);
  Atomics.notify(view, idx, 1);
}

Ring buffer (lock-free SPSC)

class RingBuffer {
  constructor(sab, capacity) {
    this.head = new Int32Array(sab, 0, 1);
    this.tail = new Int32Array(sab, 4, 1);
    this.data = new Int32Array(sab, 8, capacity);
    this.cap = capacity;
  }
  push(v) {
    const t = Atomics.load(this.tail, 0);
    const next = (t + 1) % this.cap;
    if (next === Atomics.load(this.head, 0)) return false; // full
    this.data[t] = v;
    Atomics.store(this.tail, 0, next);
    return true;
  }
}

WASM threads memory

const memory = new WebAssembly.Memory({ initial: 10, maximum: 100, shared: true });
// memory.buffer is SharedArrayBuffer

매 결정 기준

상황	Approach
Small data, infrequent	postMessage (clone)
Large buffer, hot path	SAB + Atomics
Transfer ownership once	postMessage with transfer list
Multi-threaded WASM	shared:true Memory

기본값: 매 small data postMessage, 매 hot-path large buffer SAB.

🔗 Graph

• 변형: SharedArrayBuffer_보안_이슈와_Cross-Origin_Isolation
• 응용: OffscreenCanvas
• Adjacent: Structured_Clone

🤖 LLM 활용

언제: 매 large data parallel processing (image/video/ML inference) 의 + 매 worker 간 frequent sync 필요 시. 언제 X: 매 simple task offload (postMessage 충분) 또는 매 COOP/COEP 헤더 설정 불가능한 환경.

❌ 안티패턴

• Non-atomic access on shared view: 매 race condition. 매 always Atomics.* 사용.
• Spin without wait: 매 CPU burn. 매 Atomics.wait 으로 block.
• Missing COOP/COEP: 매 modern browser 에서 SAB 비활성화. 매 cross-origin isolation 필수.

🧪 검증 / 중복

• Verified (MDN SharedArrayBuffer, ECMAScript Atomics spec).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — SAB + Atomics patterns