2nd/10_Wiki/Topics/Frontend/Buffer Allocation.md

---
id: wiki-2026-0508-buffer-allocation
title: Buffer Allocation
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [ArrayBuffer Allocation, Typed Array Pool]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [performance, memory, buffer, typed-array, gc]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript/TypeScript
  framework: Browser/Node/WebGPU
---

# Buffer Allocation

## 매 한 줄
> **"매 buffer 매 reuse 매 GC 의 X"**. Buffer allocation은 binary data buffer (ArrayBuffer / Typed Array)의 effective lifecycle 관리 — naive `new Uint8Array(N)` per operation은 GC churn을 유발해 frame budget을 깬다. 2026 WebGPU / WebCodecs / canvas heavy app 의 must-skill.

## 매 핵심

### 매 cost source
- **Allocation**: V8/SpiderMonkey backing-store malloc + zero-fill.
- **GC**: large allocation → Old-gen → expensive sweep.
- **Cache miss**: 매 fresh memory 의 cold cache.
- **Fragmentation**: many sizes → heap 의 fragmented.

### 매 strategy
- **Pool / freelist**: 매 size class 매 reuse.
- **Subarray view**: single big buffer + slice views.
- **Pre-allocation**: peak size 부터 allocate.
- **SharedArrayBuffer**: cross-thread, no copy.

### 매 응용
1. Audio / video frame buffer.
2. WebGL / WebGPU vertex / index buffer.
3. WebSocket binary message parser.

## 💻 패턴

### Simple buffer pool
```ts
class BufferPool {
  private pool: Uint8Array[] = [];
  constructor(private size: number, private max = 32) {}

  acquire(): Uint8Array {
    return this.pool.pop() ?? new Uint8Array(this.size);
  }

  release(buf: Uint8Array) {
    if (this.pool.length < this.max) {
      buf.fill(0);
      this.pool.push(buf);
    }
  }
}

const pool = new BufferPool(4096);
const b = pool.acquire();
// use ...
pool.release(b);
```

### Size-class pool
```ts
class SizeClassPool {
  private classes = new Map<number, Uint8Array[]>();

  private classOf(n: number): number {
    return Math.pow(2, Math.ceil(Math.log2(Math.max(n, 16))));
  }

  acquire(n: number): Uint8Array {
    const cls = this.classOf(n);
    const list = this.classes.get(cls);
    return (list?.pop() ?? new Uint8Array(cls)).subarray(0, n);
  }

  release(buf: Uint8Array) {
    const cls = buf.buffer.byteLength;
    if (!this.classes.has(cls)) this.classes.set(cls, []);
    this.classes.get(cls)!.push(new Uint8Array(buf.buffer));
  }
}
```

### Single backing buffer + views
```ts
const big = new ArrayBuffer(1024 * 1024); // 1MB
const headers = new Uint32Array(big, 0, 256);          // 1KB header
const body = new Uint8Array(big, 1024, 1024 * 1023);   // remainder
```

### WebSocket binary parsing — no copy
```ts
ws.binaryType = 'arraybuffer';
ws.onmessage = (e: MessageEvent<ArrayBuffer>) => {
  const dv = new DataView(e.data);
  const type = dv.getUint8(0);
  const length = dv.getUint32(1, true);
  const payload = new Uint8Array(e.data, 5, length);
  handle(type, payload);
};
```

### SharedArrayBuffer ring buffer (worker comms)
```ts
// main
const sab = new SharedArrayBuffer(1024);
const view = new Int32Array(sab);
worker.postMessage(sab);

// worker — Atomics 매 lock-free synchronization
self.onmessage = (e) => {
  const view = new Int32Array(e.data);
  Atomics.store(view, 0, 42);
  Atomics.notify(view, 0, 1);
};
```

### Reusable canvas pixel buffer
```ts
class FrameRecycler {
  private buffers: ImageData[] = [];
  acquire(w: number, h: number) {
    return this.buffers.find(b => b.width === w && b.height === h)
      ?? new ImageData(w, h);
  }
  release(b: ImageData) {
    if (this.buffers.length < 4) this.buffers.push(b);
  }
}
```

### Detecting allocation hot spots
```ts
// 매 dev-only — 매 wrap allocator 매 trace
const _orig = Uint8Array;
let count = 0;
(globalThis as any).Uint8Array = function (...args: any[]) {
  count++;
  if (count % 1000 === 0) console.warn('Uint8Array allocations:', count);
  return new _orig(...args);
};
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Per-frame temp buffer | pool with size class |
| Streaming binary protocol | preallocated parser buffer |
| Cross-thread share | SharedArrayBuffer + Atomics |
| GPU upload | persistent GPU buffer + map/unmap |
| Rare large alloc | direct allocate |

**기본값**: measure GC pressure first; pool only when allocator shows up in profile.

## 🔗 Graph
- 부모: [[Memory Management]] · [[Performance]]
- 변형: [[Object Pool]]
- 응용: [[WebGPU]]
- Adjacent: [[SharedArrayBuffer]] · [[TypedArray]] · [[Garbage Collection]]

## 🤖 LLM 활용
**언제**: pool implementation scaffold, view layout calculation, ring buffer design.
**언제 X**: 매 GC actual measurement — Chrome Memory profiler.

## ❌ 안티패턴
- **Premature pool**: 매 micro-opt — measure first.
- **Pool 무제한**: 매 leak — max size cap.
- **Subarray after detach**: transferred buffer — invalid.
- **Concurrent writes without Atomics**: SharedArrayBuffer 매 race.
- **Forget to zero-fill on release**: 매 stale data leak across owners.

## 🧪 검증 / 중복
- Verified (V8 blog, MDN ArrayBuffer, WebGPU spec).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — buffer pool + view layout pattern |