렌더링 엔진

렌더링 엔진(Rendering Engine) 은 HTML, CSS, JS 등 웹 문서를 해석해서 사용자에게 시각적으로 보여주는 기능을 담당하는 소프트웨어이다.

대표적인 렌더링 엔진으로는 Blink Webkit Gecko 정도가 있다.

Blink

Chrome은 원래 Webkit을 사용했지만, 현재는 Blink를 사용중이다.
Blink는 Webkit에서 파생되어 Google에 의해 만들어졌다.

기존의 Webkit은 모놀리식(Monolithic) 구조로, 렌더링 엔진의 내부 기능들이 하나의 프로세스 내에서 밀접하게 연결되어 작동하는 구조였다.
하지만, Chrome은 각각의 탭들을 독립된 프로세스로 실행하려는 지향했고, 이를 구현하기 위해 Webkit 내에서 크롬 전용 포크를 만들어서 관리했지만, 점점 관리가 복잡해졌다고 한다.

이러한 구조적 및 개발 방향성 차이로 인해, 구글은 Chrome에 적합한 독립된 렌더링 엔진을 개발하고자 했고, 이게 바로 Blink이다.

Rendering Process

렌더링 프로세스 란, 사용자가 웹사이트에 접근했을 때, HTML/CSS/JS를 받아 화면에 실제로 보이게 하기까지의 과정을 의미한다.

HTML/CSS/JS를 수신했다고 가정하고, 아래와 같은 순서로 렌더링 프로세스가 진행된다.

1. HTML 파싱 -> DOM 트리 생성
2. CSS 파싱 -> CSSOM 트리 생성
3. DOM + CSSOM -> 렌더 트리 생성
4. Layout
5. Paint
6. Composite
7. 화면 출력

1. HTML 파싱

브라우저는 HTML 문서를 파싱하면서 `DOM(Document Object Model)` 이라는 트리를 만든다.

2. CSS 파싱

CSS 파일이나 <style> 태그 안의 스타일은 CSS 파서가 해석해서 CSSOM(CSS Object Model) 트리를 만든다.
어떤 노드에 어떤 스타일이 적용될지 에 대한 정보를 가진다.

3. 렌더 트리 생성

1번과 2번 과정의 결과물인 `DOM` 과 `CSSOM`을 결합해서 `렌더 트리(Render Tree)`를 만든다. 렌더 트리는 `실제로 화면에 표시되는 요소들` 만 포함한다. 즉, `display: none`과 같은 요소는 포함시키지 않는다.

4. Layout(혹은 Reflow)

렌더 트리를 기반으로 각 요소의 정확한 위치(x, y), 크기(width, height)를 계산하는 단계다.
폰트, 이미지 크기, 뷰포트 크기 등이 영향을 미친다.
레이아웃 계산은 문서의 크기나 요소가 바뀔 때마다 전체 페이지 혹은 일부 요소들의 레이아웃을 다시 계산하는 작업이 발생할 수도 있다.

5. Paint

Layout에서 계산된 위치 정보와 크기를 바탕으로 브라우저가 화면을실제 픽셀 단위로 그리는 작업 을 한다.
이 과정에서 CPU가 많이 사용된다.

6. Composite

웹 페이지는 여러 레이어 로 나뉘는데, 해당 레이어들을 GPU에 전달해서 화면에 조합하는 과정이다.
애니메이션, 3D, transform, opacity(투명도) 등은 각각 별도의 레이어로 만들어져서 성능 향상을 도모한다.

7. 화면 출력

최종적으로 GPU가 각 레이어를 조합해 하나의 완성된 프레임을 화면에 표시한다.