책장/Javascript

[JavaScript] 브라우저 엔진이란

TERAJOO 2020. 8. 27. 15:29

JavaScript 엔진은 JavaScript 코드의 인터프리터라고 보면된다.

여기서 인터프리터란 코드 한 구문씩 기계어로 해석해나가면서 실행해주는 프로그램이라고 알면 되고~

여튼 JavaScript 엔진은 여러 종류의 웹 브라우저에서 찾아볼 수 있는데 대표적으로 Google Chrome의 V8, 블링크가 있으며, Mozilla Firefox의 SpiderMonkey 도 있다.

연도 별 엔진 [출처 : 위키피디아]

이 엔진들은 각자 퍼포먼스가 다르고, 지원되는 ECMAScript도 다르다. ECMAScript가 새로운 에디션을 발표하면 이에 맞춰서 JavaScript 엔진도 해당 사양을 따라가도록 점진적으로 업데이트를 해준다. 

 

이름 설명
게코(Gecko) 모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 이를 탑재하고 있다.
블링크(Blink) 웹키트에서 파생된 레이아웃 엔진으로 크롬, 오페라 등이 이를 탑재하고 있다.
트라이던트(Trident) 마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 그리고 윈앰프, 리얼플레이어의 미니 브라우저 등이 이를 탑재하고 있다.
프레스토(Presto) 오페라 소프트웨어의 사유 엔진으로 오페라가 탑재하고 있다. 오페라 15부터는 블링크로 교체되었다.
KHTML KDE 컨커러가 탑재하고 있다.
웹키트(Webkit) KHTML에서 파생된 레이아웃 엔진으로 사파리 등이 탑재하고 있다.
태즈먼(Tasman) 마이크로소프트의 레이아웃 엔진으로 맥용 인터넷 익스플로러가 탑재하고 있다.

 

이 때!! 브라우저마다 ECMAScript 를 지원하는 범위가 다르게 때문에, 웹 코딩시 흔히 듣는 "호환성 문제" 라는 것이 여기서 발생하게 된다.

이러한 문제를 해결하기 위해 바벨(babel) 이라는 오픈소스 JavaScript 트랜스 파일러를 사용한다. 바벨은 ES6 사양 기준으로 작성된 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환해준다. 주요 브라우저는 ES5까지 지원하기 때문에 바벨이 ES5 코드로 변경해주어 호환성 문제를 해결할 수 있게 해준다.