웹 신기술 WebAssembly

WebAssembly란?

: 기존의 브라우저는 HTML, CSS, JS 언어만 해석 할 수 있었지만

2017년 부터 WebAssembly 기능이 여러 브라우저에 공식적으로 추가가 되면서

브라우저가 지원하는 언어가 4개가 된 것이다.

(HTML, CSS, JS, WebAssembly)

WebAssembly는 새로운 언어가 아니라 브라우저에서 실행 가능한 새로운 파일 형식이다.

WebAssembly 파일 확장자는 .wasm이고 브라우저는 .wasm 실행 가능하다.

프로그래밍 언어가 아니라 .wasm 파일을 만들어서 작성하고 그런 거 잘 안하고

평소에 쓰던 프로그래밍 언어들을 .wasm 형식으로 변환(컴파일)이 가능하게 된 것이다.

 

특징

1. 빠른 초기 실행

2. Optimizing 많이 됨

3. Optimizing 취소 할 일 없음

 

장점

1) 자바스크립트 말고 다른 언어로 작성한 프로그램도 브라우저에서 실행 가능(확장성)

예를 들어

Squoosh라는 구글에서 만든 이미지 압축 파일 서비스는 C++ 언어로 만들어진 서비스이지만. WebAssembly를 사용하여서 변환(컴파일) 할 수 있게 됨으로써 브라우저에서도 사용 할 수 있게 되었다.

 

2) 작동 속도가 빨라서 쓴다.

JS를 두고 굳이 WA를 사용 할 필요가 있을까??라는 의문이 들 수 있는 데 이유는 WA이 JS보다 작동 속도가 빨라서이다.

 

왜 빠를까?

-> JS는 크롬 브라우저가 실행을 해주는 데 실은 과정이 복잡하다.

 

1) 브라우저가 JS 실행 할 때

* Bytecode : 기계 친화적인 자바스크립트 번역본

* 실행 : Interpreter가 코드를 실행 해준다. (크롬 브라우저에서는 Interpreter를 Ignition이라고 부른다.)

 

요즘 브라우저들이 실행 작업이 빠른 이유는 최적화 작업을 하기 때문이다.

반복 등장하는 코드를 발견하면 Optinized Code를 불러와서 최적화(Optimizing)을 해준다. 기계어와 가까운 언어로 번역 해주면 컴퓨터가 좋아해서 더 빨리 실행한다.

Optimized Code에서는 실행에서는 Turbofan 엔진을 사용한다. (매우 빠름)

 

(참고) Optimize 취소도 가끔 한다.

- 타입이 변하거나 그러면 취소 해야 하기 때문에

-> 팬이 꺼지면 다시 Ignition이 실행된다. (이러면 조금 느려짐)

 

2) 브라우저가 .wasm 파일을 실행 할 때

JS처럼 파싱이 필요없고 미리 컴파일이 되어 있기 때문에 거의 큰 작업 없이 Liftoff 엔진이 바로 실행 시켜준다.

 

- 자주 사용하는 코드는 최적화(Optimizing)도 해준다.

- 거의 모든 코드가 Optimizing이 될 수 있다. / Optimizing 취소도 거의 없다. (타입 변동 사항이 거의 없기 때문에)

- 실행 시작 빠름, 빠른 Turbofan 잘 씀

 

Q. 항상 JS 보다 빠른 것은 아닐지도? (JS == Wasm 비슷한 속도로 동작 할 수도)

: JS의 코드를 잘만 짜면 거의 비슷할 것이다. 하지만 .wasm이 안정적으로 빠른 속도 기대 가능

 

사용 해보고 싶을 때 참고할 만한 사이트

 

출처

https://www.youtube.com/watch?v=VJag_H2Cosc&t=40s