---
id: wiki-2026-0508-sharedarraybuffer로-스레드-간-메모리-공유-
title: SharedArrayBuffer로 스레드 간 메모리 공유 효율 높이기
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [SAB, SharedArrayBuffer, Shared Memory JS]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [javascript, web-worker, concurrency, performance]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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 전달
```js
// 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
```js
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
```js
// 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)
```js
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)
```js
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
```js
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 |