docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
+5
-5
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: [[P-Reinforce]]-AUTO-217E9B
|
||||
id: [[P-Reinforce|P-Reinforce]]-AUTO-217E9B
|
||||
category: "10_Wiki/💡 Topics/Programming & Language"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - [[OffscreenCanvas]]와 Web Worker를 활용한 메인 스레드 병목 해결"
|
||||
github_commit: "[P-Reinforce] Continuous Worker - [[OffscreenCanvas|OffscreenCanvas]]와 Web Worker를 활용한 메인 스레드 병목 해결"
|
||||
---
|
||||
|
||||
# [[OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결]]
|
||||
# [[OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결|OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 자바스크립트의 단일 스레드 한계를 극복하기 위해, 무거운 그래픽 렌더링이나 연산 작업을 메인 스레드(DOM)에서 분리하여 백그라운드의 웹 워커(Web Worker) 스레드에서 병렬 처리하는 성능 최적화 기술입니다.
|
||||
@@ -17,11 +17,11 @@ github_commit: "[P-Reinforce] Continuous Worker - [[OffscreenCanvas]]와 Web Wor
|
||||
|
||||
**2. 제어권 이전 (Transfer Control) 및 실행** 메인 스레드의 원래 캔버스 요소에서 `transferControlToOffscreen()` 메서드를 호출하여 제어권을 분리합니다. 생성된 `OffscreenCanvas` 객체를 `postMessage`를 통해 웹 워커로 전달하면, 워커 스레드가 렌더링 작업을 전담하게 되며 그 결과는 메인 스레드의 원본 캔버스에 자동으로 반영됩니다.
|
||||
|
||||
**3. 메인 스레드 차단 해제 (Un[[Blocking]] the [[Main Thread]])** Three.js나 복잡한 [[WebGL]] 애니메이션, 물리 연산 등은 많은 CPU/GPU 자원을 소모합니다. 이를 워커 스레드로 옮기면 메인 스레드의 과부하를 막을 수 있습니다. 결과적으로 메인 스레드는 렌더링 계산에 블로킹되지 않고 클릭, 스크롤 같은 사용자 상호작용과 React의 UI 업데이트를 즉각적으로 처리할 수 있어 지연 없는 부드러운 앱 경험을 제공합니다.
|
||||
**3. 메인 스레드 차단 해제 (Un[[Blocking|Blocking]] the Main Thread)** Three.js나 복잡한 [[WebGL|WebGL]] 애니메이션, 물리 연산 등은 많은 CPU/GPU 자원을 소모합니다. 이를 워커 스레드로 옮기면 메인 스레드의 과부하를 막을 수 있습니다. 결과적으로 메인 스레드는 렌더링 계산에 블로킹되지 않고 클릭, 스크롤 같은 사용자 상호작용과 React의 UI 업데이트를 즉각적으로 처리할 수 있어 지연 없는 부드러운 앱 경험을 제공합니다.
|
||||
|
||||
**4. 이벤트 포워딩 (Event Forwarding)** 웹 워커는 DOM에 접근할 권한이 없으므로 마우스 클릭이나 터치 같은 사용자 이벤트를 직접 감지할 수 없습니다. 이를 해결하기 위해 메인 스레드에서 이벤트를 캡처한 뒤 `postMessage`를 통해 필요한 데이터(좌표 등)만 워커로 전달하여 상호작용을 처리하는 '대리 인터랙션' 방식을 구축해야 합니다.
|
||||
|
||||
**5. 상태 동기화 ([[State]] Synchronization)** 메인 스레드(React UI)와 워커 스레드(WebGL 씬) 간에 동일한 상태를 공유해야 할 때 동기화가 필요합니다.
|
||||
**5. 상태 동기화 ([[State|State]] Synchronization)** 메인 스레드(React UI)와 워커 스레드(WebGL 씬) 간에 동일한 상태를 공유해야 할 때 동기화가 필요합니다.
|
||||
|
||||
- **메시지 기반 동기화:** `BroadcastChannel`이나 Valtio 같은 프록시 기반 상태 관리 도구를 사용하여, 상태가 변경될 때 해당 변경점(Delta)만 직렬화하여 스레드 간에 메시지로 주고받습니다.
|
||||
- **SharedArrayBuffer:** 복사 오버헤드를 완전히 없애야 하는 극단적인 최적화가 필요할 때 사용되며, 두 스레드가 동일한 메모리 영역을 공유하여 원자적으로 데이터를 읽고 씁니다.
|
||||
|
||||
Reference in New Issue
Block a user