Antigravity Agent
153 lines
4.5 KiB
Markdown
153 lines
4.5 KiB
Markdown
---
|
|
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
|
|
- 부모: [[Web_Workers]] · [[JavaScript_Concurrency]]
|
|
- 변형: [[SharedArrayBuffer_보안_이슈와_Cross-Origin_Isolation]]
|
|
- 응용: [[WebAssembly_Threads]] · [[OffscreenCanvas]]
|
|
- Adjacent: [[Atomics_API]] · [[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 |
|