브라우저 렌더링과정

1.DOM 트리 구축

하나의 html 페이지는 div, span등 각각의 요소를 가진다. 각 요소는 하나하나의 노드로 설정이 되어 트리 형태로 저장된다. 이를 DOM트리라고 한다. 예를들어 div > span, span 이라는 요소가 있다면 div라는 부모노드 밑에 span이라는 자식노드가 2개 생기는 것이다.

 

2.렌더트리와 렌더레이어 생성

각각의 노드는 CSS파서에 의해 정해진 스타일 규칙이 적용되어 있다. ex) span.color = 'red'는 노드 색깔이 빨간색이다.

이런 규칙에 따라 CSSOM트리가 만들어지고 미리 만들어놓은 DOM 트리 내에 있는 노드와 함께 렌더객체가 생성되며 이들이 모여 병렬적인 렌더트리가 생성된다.

이때 display:none이 포함된 노드는 지워지고 font-size등 상속적인 스타일은 부모노드에만 위치하도록 설계하는 등의 최적화를 거쳐 렌더레이어가 완성된다. 렌더객체와 렌더레이어는 1:1대응이 되지 않을 수 도 있다. display:none으로 사라지는 노드들이 있을 수 있기 때문이다.

하지만 DOM트리와 렌더트리는 1:1대응이 된다. 이렇게 렌더트리가 생성된 후 렌더레이어에 올려진다. 렌더레이어가 완성될 때 GPU에서 처리되는 부분이 있으면 이 요소들은 각각 강제적으로 그래픽 레이어로 분리된다.

ex) CSS3D, video & canvas, filter, animation, transform:translatez(0)등..

 

3.렌더레이어를 대상으로 layout을 설정

이때 좌표는 보통 무로르 기준으로 설정된다. Global Layout은 브라우저 사이즈가 증가하거나 폰트 사이즈가 커지면 변경된다.

 

4.렌더레이어를 대상으로 칠하기(paint)

픽셀마다 점을 찍듯 칠한다. 레스터화라고도 한다.

 

5.레이어 합치기(composite layer) 및 표기

각각의 레이어로부터 비트맵이 생성되고 GPU에 텍스처로 업로드 된다. 그 다음 텍스처들은 서로 합쳐져 하나의 이미지로

렌더링되며 화면으로 출력된다.