브라우저 엔진

브라우저 엔진이란?

웹 브라우저의 핵심이 되는 구성 요소다.

 

브라우저 엔진은 간단히 말하면 주로 HTML, CSS 등 웹 페이지 구성을 위한 자료를 해석하여 사용자의 장치에 맞게 시각적인 표현으로 변환하는 역할을 한다.

 

레이아웃 엔진? 렌더링 엔진?

브라우저 엔진은 레이아웃 엔진, 렌더링 엔진이라고도 불린다.

 

렌더딩과 레이아웃은 별도 엔진의 의해 관리될 수 있으나 실제로 이 둘은 서로 밀접히 연결되있고 브라우저 엔진과 같이 묶어서 이야기하는 경우가 많다.

 

렌더링이란?

사용자가 요청한 컨텐츠를 표시하는 역할을 한다. 예를 들어 HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시하는 역할을 한다.

 

브라우저 엔진 작동 방법

브라우저 엔진의 종류에 따라 다소 다르지만 대체로 아래와 같은 방법으로 동작한다.

 

1. 유저의 요청을 받아서 서버에 자료를 요청한다.

 

2. 서버에서 받은 자료를 기반으로 브라우저 엔진은 렌더링 엔진을 통해 번역된 자료를 표현하게 된다.

 

2. HTML을 파싱하여 DOM 노드를 만들고 이들을 합쳐서 DOM 트리를 만든다.

 

3. CSS를 파싱하여 스타일 규칙을 만든다.

 

4. DOM 트리와 스타일 규칙을 결합해 렌더 트리를 만든다.

 

5. 렌더 트리를 배치(Layout)하고 화면에 그려낸다(Painting).

 

파싱? 파서?

파싱은 서버로부터 전송 받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정을 말한다.

 

파싱 결과는 문서 구조를 나타내는 노드 트리인데 파싱트리 또는 문법트리라고 도 한다.

 

그리고 이러한 파싱을 담당하는 것을 파서라고 한다.

 

브라우저 엔진의 종류

브라우저 엔진에도 여러 종류가 있다.

 

1. 게코(Gecko)

모질라 재단에서 후원하며 오픈소스로 개발되는 엔진. 넷스케이프에서 갈라져 나왔다.

 

현재 모질라의 파이어폭스, 썬더버드 등이 사용 중이다.

 

2. 웹킷(Webkit)

애플에서 개발한 오픈소스 엔진이다. 사파리와 크롬이 이 엔진을 쓰면서 한때는 시장을 지배했다.

 

하지만 이후 애플은 웹킷2로 구글은 블링크로 갈라졌다.