WebAssembly 실행 흐름

1 고수준 언어 작성

성능이 필요한 알고리즘을 C, C++, Rust 같은 언어로 작성합니다.

filter.rs
physics.cpp

2 Wasm으로 컴파일

툴체인이 `.wasm` 이진 모듈과 필요한 glue JS를 만듭니다.

module.wasm
loader.js

3 브라우저 로드

JavaScript가 fetch, compile, instantiate 단계로 모듈을 준비합니다.

fetch()
instantiate()

4 샌드박스 실행

Wasm 엔진이 검증된 모듈을 격리된 실행 환경에서 실행합니다.

linear memory
exports.add()

5 결과 반환

계산 결과는 JS로 돌아와 DOM, Canvas, 네트워크 흐름에 연결됩니다.

result -> UI
result -> Canvas

JavaScript 영역

UI와 이벤트

버튼, 입력, 라우팅, DOM 갱신처럼 사용자와 맞닿은 흐름을 담당합니다.

모듈 로더

Wasm 파일을 가져오고 import 객체를 넘겨 실행 가능한 인스턴스를 만듭니다.

WebAssembly 영역

고성능 계산

이미지 필터, 인코딩, 물리 연산처럼 반복 계산이 큰 구간을 맡습니다.

샌드박스와 선형 메모리

격리된 메모리 모델 안에서 검증된 명령만 실행합니다.

어디에 쓰면 좋은가

이미지/비디오 처리 필터, 압축, 변환처럼 픽셀 단위 반복 계산이 많을 때

게임과 3D 물리, 경로 탐색, 기존 엔진 포팅처럼 계산량이 클 때

과학 계산 수치 계산, 시뮬레이션, 데이터 처리 라이브러리를 재사용할 때

Web Workers Wasm 계산을 worker와 함께 돌려 메인 스레드 부담을 줄일 때

JavaScript가 웹 흐름을 잡고, WebAssembly가 무거운 계산을 맡는다