2nd/10_Wiki/Topics/Frontend/Buffer Allocation.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-buffer-allocation	Buffer Allocation	10_Wiki/Topics	verified	self	ArrayBuffer Allocation Typed Array Pool	none	A	0.9	applied	performance memory buffer typed-array gc		2026-05-10	pending	language framework JavaScript/TypeScript 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

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

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

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

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)

// 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

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

// 매 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 · Arena Allocation
• 응용: WebGPU · WebCodecs · WebSocket
• Adjacent: SharedArrayBuffer · Typed Array · 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