WebAssembly VS Javascript

juhojung·2022년 5월 26일
0

Javascript

목록 보기
3/3

내가 주로 사용하는 자바스크립트 구동과정을 이해하면서, 자료를 찾아보던중, WebAssembly 기술을 접하게 되었다.

어떻게 이루어지는지, 자바스크립트와 차이점은 어떤것인지 알아보고 싶어졌다.
오늘은 자바스크립트와 웹어셈블리 구동의 차이점을 보는 포스팅이다.

  • WebAssembly

    웹 개발을 많이 하는사람들은 다양한 언어로 개발을 하지만,
    결국 HTML5와 Javascript 는 꼭 이해를 해야한다. 하지않는다면 웹 서비스 운영이 어렵기 때문이다.
    그런데, 이 기술은 자바스크립트를 몰라도 개발할수 있고,
    자바스크립트 보다 단순하게 보면 더 빠른 구동을 자랑하는 웹 언어이다.

    2019년 부터 W3C에서 권장하는 4번째 웹언어로 채택되었다.
Javascript 처리과정 이미지
WebAssembly 처리과정 이미지
  • WebAssembly VS Javascript

    위에 보이는것처럼 시각적인 효과가(?) 약간 있지만 기존 javascript 보다 처리과정이 간단한것을 볼 수 있다.
  1. parse, decode
    JS 파일이 브라우저에 들어오면 AST(Abstract Syntax Tree 구문 트리)로 변환된다.
    AST는 우리가 작성한 js 파일이 최적화 되기지않은 low level 로 변환된 형태를 말한다.
    즉, high level (js) -> low level 로 변환 하는거다.
    근데 WASM 은 이미 low -level 이기때문에 구문해석만 하면 끝난다.

  2. compile + optimize
    컴파일방식과, 인터프리터 방식 두가지를 보통 언어들은 사용한다.
    JS는 컴파일 방식을 하는데, JIT(Just-In-Time) 컴파일러로 바이트코드를 명령어로 바꾼다. 당연하게도 런타임에 컴파일을 전부 하는동안 컴퓨터는 실행코드를 이해할수 없다.
    그런데 WASM은 LLVM 컴파일러로 최적화가 어느정도 되어있어서, JS에 비해 최적화 과정이 적다. (이부분은 추후에 컴파일러만 따로 다뤄봐야겠다.)

  3. re-optimize
    재 최적화는 JS에서만 일어나는데, JIT 컴파일러가 기존 최적화를 버리고 다시 최적화를 한다고 한다. 정확히 일어나는 시점은 다음에 알아볼 예정.
    아무튼, WASM은 타입이 명시적이므로 JIT에서 데이터 수집, 타입추론 과같은 과정이 필요없다.

  4. execute
    JS 실행속도를 정확히 알려면 JIT에 대해 잘알아야한다.
    근데 JIT 은 브라우저마다 다를 수 있어서 어려운데, WASM은 이미 컴파일러를 위해 작성되었기 때문에, 이상적인 명령어 셋(Instruction set) 이 이미 있어서 JS에 비해 실행 성능차이가 10~800%(?) 있다고 한다. (궁금하면 읽어보자.)

  5. GC : Garbage Collection
    Javascript 는 기본적으로 gc를 따로 관리하지 않아도 된다. (생명주기에 따라 알아서 할당/해제 된다.) WASM은 저수준 언어이기에 따로 하나하나 C,C++에서 하듯이 malloc을 써서 관리 해줘야하긴 한다. 어렵긴해도 안정적인 성능을 제공할수는 있다.

결론

  1. WASM이 JS보다 성능면에서 좋다.
  2. 그러나, Learning Curve도 존재하고, 상대적으로 C,C++,Rust등 저레벨 언어를 사용하지 않은 웹개발자들이 옮겨타기에는 어려워보인다.
  3. 이번기회에 JS, WASM 둘다 브라우저에서 작동하기까지에 과정을 되짚어서 좋았다.
  4. WASM을 사용하면 60프레임 이상의 3D게임을 만들수 있을정도라고 하니, 미래를 위해 두개 다 병행하여 공부해보는것으로 결정.

_참고자료 :

profile
"어찌 할 수 없는 일에 대해 고민하는 시간은 낭비일 뿐이다."

0개의 댓글