Files

T

koriweb 5ba5a55c78 feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

2026-05-08 19:52:07 +09:00

6.0 KiB

Raw Blame History

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

title

SharedArrayBuffer vs postMessage 성능 차이

📌 한 줄 통찰 (The Karpathy Summary)

postMessage는 데이터를 직렬화 및 역직렬화하여 스레드 간에 전달하기 때문에 통신 오버헤드가 발생하는 반면, SharedArrayBuffer는 두 스레드가 동일한 메모리 영역을 공유하여 데이터 복사 비용 없이 0의 오버헤드와 극도로 낮은 지연 시간을 달성하는 기술입니다.

📖 구조화된 지식 (Synthesized Content)

1. 데이터 전송 및 복사 메커니즘

postMessage: 기본적으로 데이터를 다른 스레드로 보낼 때 구조화된 복제(Structured Clone) 알고리즘을 통해 데이터를 직렬화(Serialization)하고 역직렬화하는 과정을 거칩니다. 이 과정에서 데이터가 복사되므로, 전달하는 페이로드의 크기에 비례하여 메모리 및 CPU 비용이 증가합니다. (단, Transferable Objects를 사용하면 복사 없이 소유권을 이전할 수 있으나, 전송 후 원래 스레드에서는 해당 객체에 접근할 수 없게 됩니다).
SharedArrayBuffer: 두 스레드가 완전히 동일한 메모리 주소 공간을 공유합니다. 데이터를 한쪽 스레드에서 쓰면 다른 스레드에서 즉시 읽을 수 있기 때문에, 데이터 복사나 이동이 전혀 발생하지 않습니다.

2. 성능 및 지연 시간 (Latency)

postMessage: 메시지 패싱 과정에서 약 5~10ms의 통신 오버헤드가 발생할 수 있습니다. 특히 매 프레임마다 수천 개의 엔티티 위치 값이나 큰 JSON 객체를 주고받아야 하는 게임 환경에서는 이 오버헤드가 심각한 성능 병목(Bottleneck)으로 작용하여 프레임 드랍을 유발할 수 있습니다.
SharedArrayBuffer: 스레드 간 통신 지연 시간이 극도로 낮습니다(가장 빠름). 데이터 직렬화 비용이 '0'이므로 속도와 메모리 효율성 측면에서 가장 압도적인 성능을 발휘하며, 원자적 연산(Atomic Operations)을 지원하여 동시성 문제 없이 고속으로 데이터를 처리할 수 있습니다.

3. 개발 편의성 및 구현 복잡도

postMessage: 구현 복잡도가 낮으며(Low), 개발자에게 익숙한 자바스크립트 일반 객체나 JSON 구조를 그대로 다룰 수 있어 매우 직관적이고 친화적입니다.
SharedArrayBuffer: 구현 복잡도가 매우 높습니다(High). JSON과 같은 구조화된 데이터 대신 원시 이진 데이터(Raw Binary Data) 버퍼를 직접 제어하고 관리해야 하므로, 아주 저수준(Low-level)의 프로그래밍이 요구됩니다.

4. 적합한 사용 사례 (Use Cases)

postMessage: 크기가 작거나 가끔씩 전송되는 이벤트, 혹은 결과 도출에 시간이 걸리는 일반적인 비동기 연산의 결과를 받을 때 적합합니다.
SharedArrayBuffer: ECS(Entity-Component-System) 아키텍처 등에서 수많은 객체의 컴포넌트 데이터를 담고, 물리 엔진(워커 스레드)의 연산 결과를 렌더링 루프(메인 스레드)가 매 프레임 즉각적으로 읽어가야 하는 고성능 게임 엔진 구현에 필수적입니다.

⚠️ 모순 및 업데이트 (Contradictions & Updates)

과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
정책 변화: Programming & Language 분야의 자동 자산화 수행.

🔗 지식 연결 (Graph)

Related Topics: Web Worker, 직렬화(Serialization) 및 병목 현상, Transferable Objects, Data-Oriented Design (ECS), 원자적 연산(Atomic Operations)
Projects/Contexts: 멀티스레드 기반 고성능 React 게임 엔진, 실시간 물리 시뮬레이션 동기화
Contradictions/Notes: postMessage도 ArrayBuffer 등을 Transferable 객체로 전달하면 직렬화 오버헤드를 거의 0으로 만들 수 있습니다. 그러나 이는 '소유권 이전' 방식이므로 두 스레드가 "동시에 데이터를 읽고 쓰는" 양방향 공유(Shared)가 불가능하다는 점에서 SharedArrayBuffer와 결정적인 차이를 가집니다.

Last updated: 2026-04-14

🤖 LLM 활용 힌트 (How to Use This Knowledge)

언제 이 지식을 쓰는가:

(TODO)

언제 쓰면 안 되는가:

(TODO)

🧪 검증 상태 (Validation)

정보 상태: needs_review
출처 신뢰도: A
검토 이유: (P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)

🧬 중복 검사 (Duplicate Check)

기존 유사 문서: (TODO: 인덱서 클러스터 리포트 참조)
처리 방식: UPDATE (자동 정규화)
처리 이유: Phase 1 정규화 — 옛 템플릿/누락 필드 보강.

🕓 변경 이력 (Changelog)

날짜	변경 내용	처리 방식	신뢰도
2026-05-08	P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화)	UPDATE	A

💻 코드 패턴 (Code Patterns)

패턴 1: (TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

(TODO)

선택 B를 써야 할 때:

(TODO)

기본값:

(TODO)

❌ 안티패턴 (Anti-Patterns)

[안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)

6.0 KiB Raw Blame History