WEBASSEMBLY RUNTIME

WebAssembly 경계 비용

Wasm은 네이티브에 가까운 계산을 브라우저로 가져오지만, .wasm 로드, instantiate, linear memory, JS↔Wasm 호출 경계 비용을 이해해야 적절한 곳에 쓸 수 있다.

01

파일 로드

브라우저가 .wasm 바이너리를 가져오고 MIME type과 캐시 정책을 적용한다.

application/wasm
02

컴파일/인스턴스화

WebAssembly.instantiateStreaming이 import 객체와 함께 모듈을 실행 가능하게 만든다.

imports
03

메모리 공유

문자열/배열은 linear memory에 올리고 JS는 TypedArray view로 읽는다.

copy cost
04

함수 호출

계산이 큰 루프는 이득이 있지만 작은 호출을 자주 왕복하면 경계 비용이 커진다.

batching
CPU heavy
이미지 처리, 압축, 암호 연산 큰 계산을 한 번에 넘기면 Wasm 이점이 커진다.
good fit
DOM heavy
DOM 조작이 많은 UI DOM API 접근은 JS가 맡으므로 Wasm 이점이 작다.
bad fit
small calls
작은 함수를 매우 자주 호출 JS↔Wasm 경계 비용 때문에 묶어서 호출하는 설계가 필요하다.
batch calls
instantiate fail
MIME/CORS/import 불일치 서버 헤더, import object, 브라우저 지원을 함께 확인한다.
loading error

배포 확인

헤더 .wasm이 application/wasm으로 제공되고 캐시 정책이 맞는지 본다.
fallback Wasm 로드 실패 시 JS 대체 또는 오류 UI가 준비되어야 한다.
측정 JS 구현과 실제 입력 크기에서 비교해 경계 비용까지 포함한 시간을 기록한다.