본문 바로가기
프로그램개발/IT 트렌드·팁·상식

웹브라우져 자바스크립트 엔진,렌더링 엔진

by 크레도스 2020. 12. 18.

출처 : mygumi.tistory.com/173

 

자바스크립트 엔진이란? 렌더링 엔진이란? :: 마이구미

이번 글은 자바스크립트 엔진(Javascript Engine)과 렌더링 엔진(Rendering Engine)에 대해 다뤄본다. 정의와 오해를 알아본다. 자바스크립트 엔진이란 무엇인가? 자바스크립트 코드를 실행하는 인터프리

mygumi.tistory.com

이번 글은 자바스크립트 엔진(Javascript Engine)과 렌더링 엔진(Rendering Engine)에 대해 다뤄본다.

정의와 오해를 알아본다.

 

자바스크립트 엔진이란 무엇인가?

자바스크립트 코드를 실행하는 인터프리터 또는 프로그램이라고 볼 수 있다.

전형적인 인터프리터의 역할 및 JIT 컴파일 활용 및 많은 기능을 하고, 주로 웹 브라우저를 위해 사용된다.

 

대중적으로 알려진 자바스크립트의 엔진은 구글의 V8이라고 들어봤으리라 생각한다.

Node.js에서 사용되는 엔진이기도 하다.

엔진의 종류로는 아래와 같다. (이미 잘 알려진 브라우저를 기준)

 

  • Rhino - 모질라
  • SpiderMonkey - 파이어폭스
  • V8 - 구글, 오페라
  • JavascriptCore - 사파리
  • Chakra - 익스플로러, 마이크로소프트 엣지

 

간혹 자바스크립트의 엔진은 V8이라고 생각하는 사람들이 있다.

위와 같이 엔진은 많이 존재한다.

구글의 엔진이자, Node.js에서도 V8를 택했기 때문에 오해가 생겼으리라 생각한다.

 

렌더링 엔진이란 무엇인가?

웹 렌더링 엔진(Web Rendering Engine) 또는 웹 브라우저 엔진(Web Browser Engine) 또는 웹 레이아웃 엔진(Web Layout Engine)이라고 불린다.

렌더링, 브라우저, 레이아웃 단어 그대로 웹 페이지에 대한 컨텐츠 및 데이터를 위해 동작하는 엔진이다.

렌더링 역할을 하는 엔진이 브라우저마다 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다.

또한, CSS에서는 아래와 같은 코드를 볼 수 있다.

 

-moz-border-radius: 2em; -ms-border-radius: 2em; -o-border-radius: 2em; -webkit-border-radius: 2em;

 

렌더링 엔진의 종류로는 아래와 같다.

  • Gecko - 모질라, 파이어폭스
  • Blink - 구글, 오페라
  • Webkit - 사파리
  • Trident - 익스플로러
  • EdgeHTML - 마이크로소프트 엣지

 

* Blink는 구글이 Webkit을 대체하기 위한 자체적으로 개발한 차세대 엔진이다.


결론은, 자바스크립트 엔진과 렌더링 엔진은 서로 다르기 때문에 숙지하자.

 

렌더링 엔진에 대한 비교

https://www.kics.or.kr/storage/paper/event/2015_summer/publish/14C-26.pdf