안녕하세요! 대학생 프론트엔드 개발자 가든입니다:)
오늘은 웹 어셈블리가 무엇인지 알아보고, 웹 어셈블리와 자바스크립트가 브라우저에서 처리되는 과정을 공부해보도록 하겠습니다 😁
제가 아직 부족한 대학생이기에,,, 기본적인 웹 어셈블리 개념과 js와 비교해서 브라우저에서 처리되는 과정을 비교하고, 웹 어셈블리의 장점을 알아보도록 할게요 기초적인 수준을 다루고 있다는 점을 양해해주세요,,!
01. 웹 어셈블리란?
웹 어셈블리란 C나 C++, Rust와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 바이너리 형식(0과 1로 이루어진 이진 형식)으로 바꿔주는 기술을 뜻합니다.
일반적으로 웹 어플리케이션을 개발할때 사용하는 언어는 JavaScript이죠? 점점 JavaScript의 속도가 빨라지고 있지만 아직 C나 C++과 같은 언어들에 비해 속도가 느리다고 합니다.
우리가 쉽게 체감을 할 수 있는 경험은 같은 코테 문제를 풀더라도 c++로 풀었을 때랑 js로 풀었을때랑 실행 속도가 확연히 다른 것을 느낄 수 있었죠..? 이게 맞는 비유인지는 모르겠지만 한번 써봤습니다..ㅋㅋㅋ
02. 웹 어셈블리의 기능
웹 어셈블리는 웹브라우저에서 불러오는 것을 가능하게 함을 통해 저수준 언어를 실행가능하도록 해 네이티브에 가까운 성능을 제공하고, 저수준의 메모리 모델을 가진 언어의 컴파일 타겟 프로그램을 웹에서 돌릴 수 있게 해주는 기능을 제공합니다. 쉽게 말하면, 웹 어셈블리 모듈을 웹앱으로 가져와서 대규모 성능 이점과 새로운 기능을 제공하면서 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다.
03. 자바스크립트의 브라우저 랜더링 과정
자바스크립트는 어떻게 브라우저에서 렌더링 될까요??
먼저 자바스크립트는 인터프리터 언어이기때문에, 코드가 실행 시점에 한 줄씩 읽히면서 실행됩니다. 따라서 개발은 빠르게 될 수 있지만, 브라우저에서 실행되는 속도는 상대적으로 느릴 수 있다는 단점을 가지고 있어요
자바스크립트 처리 과정
- 먼저 웹 페이지에서 스크립트가 로드됩니다.
- 브라우저의 자바스크립트 엔진이 스크립트를 읽고 작성된 코드의 구문을 분석하면서 인식합니다.
- 코드가 실행되기 전에 바이트코드로 변환하거나, 실행 시점에 인터프리터를 통해 직접 실행되는 컴파일과 인터프리팅 과정을 실행합니다.
- 이제 실행되는 과정인데, 컴파일된 코드나 인터프리터를 통해 실행되며, 초기 실행 속도는 느릴 수 있습니다.
04. 웹어셈블리 브라우저 랜더링 과정
웹어셈블리 처리 과정
- 미리 컴파일된 .wasm 파일이 웹 페이지에 로드됩니다.
- 로드된 웹어셈블리 코드는 보안 검증을 거쳐 에러가 없는지 확인하는 데요, 이 과정이 바이너리 검증 과정입니다.
- 웹어셈블리 코드는 매우 빠르게 기계어로 컴파일되는 과정을 거칩니다. 이미 최적화된 형태로 제공되기 때문에 이 과정이 빠릅니다.
- 이제 실행되는 과정인데, 컴파일된 코드가 즉시 실행됩니다. 빠른 시작과 높은 실행 속도의 장점을 가지고 있습니다.
05. 웹어셈블리와 JS의 성능
자바스크립트는 런타임 중에 최적화되는 경우가 많은데, 이는 코드가 실행되면서 점차 최적화 되어가지만, 초기에는 느립니다. 웹어셈블리는 이미 최적화된 코드로 컴파일되기 때문에 로드 후 거의 최고 성능으로 실행됩니다. 따라서 웹 어셈블리의 이러한 장점 때문에 복잡한 그래픽처리와 비디오 게임을 처리하는 만큼의 자바스크립트로만 도달하기 어려운 성능을 제공합니다.
오 웹어셈블리가 브라우저에서 처리되는 과정이 자바스크립트보다 빠른 이유를 자세히 정리해볼게요!
1. 저수준 언어로 설계
웹 어셈블리는 매우 저수준의 바이너리 형식으로 설계되어있어요! cpu가 직접 실행할 수 있는 기계어와 가깝게 설계되었어요. 따라서 복잡한 과정없이 빠르게 기계어로 변역됩니다. 하지만 자바스크립트는 더 높은 수준의 언어이기 때문에 실행 전에 많은 변환 과정과 최적화 과정을 거쳐요,,
2. 미리 컴파일된 바이너리 형식으로 제공됨
웹 어셈블리 코드는 서버에 이미 컴파일된 바이너리 형식으로 브라우저에 제공되기 때문에 위에서도 언급되었지만 추가 컴파일 과정없이 즉시 실행됩니다!
하지만 자바스크립트는 브라우저에 로드된 후에야 파싱되는 과정을 거치기 때문에 초기 로드와 실행과정에서 많은 시간이 소요됩니다.
3. 타입 시스템을 사용함
웹 어셈블리는 타입 시스템을 사용하는데요, 브라우저가 먼저 변수의 타입을 미리 알고 있어서 런타임에 타입 체크를 하지 않아도 되는 것을 의미합니다. 이로 인해서 실행시간이 매우 단축됩니다. ;)
