티스토리 뷰
브라우저 렌더링 과정
브라우저는 브라우저엔진 등으로 이루어져있다. 이중에서 렌더링엔진이 브라우저 렌더링을 담당.
브라우저 렌더링은 다음과 같은 과정으로 이루어짐. DOM트리 CSS파서 등을 기반으로 렌더트리가 구축되는 등의 작업.
DOM 트리 구축
하나의 html 페이지는 div, span 등 각각의 요소를 가집니다. 각 요소는 하나하나 노드(Node)로 설정이 되어 트리 형태로 저장되는데, 이를 DOM 트리라고 합니다. 예를 들어 div > span, span이라는 요소가 있다면 div라는 부모노드 밑에 span이라는 자식노드가 2개 생기는 것입니다.
렌더트리와 렌더레이어 생성
각각의 노드는 CSS 파서에 의해 정해진 스타일 규칙이 적용되어 있습니다. span.color = "red"는 노드 색깔이 빨간색이다 등을 말하는 것이죠. 이런 규칙에 따라 CSSOM이라는 트리가 만들어지고 미리 만들어놓은 DOM 트리 내에 있는 노드와 함께 렌더객체(Render Object)가 생성되며 이들이 모여 병렬적인 렌더트리가 생성됩니다. 이때 display:none이 포함된 노드는 지워지고 font-size 등 상속적인 스타일은 부모노드에만 위치하도록 설계하는 등의 최적화를 거쳐 렌더레이어가 완성됩니다.
렌더레이어를 대상으로 Layout 설정
이때 좌표는 보통 부모를 기준으로 설정됩니다. Global Layout은 브라우저 사이즈가 증가하거나 폰트 사이즈가 커지면 변경됩니다.
렌더레이어를 대상으로 칠하기(paint)
픽셀마다 점을 찍듯 칠합니다. 이를 레스터화라고도 합니다.
레이어 합치기(composite layer) 및 표기
각각의 레이어로부터 비트맵이 생성되고 GPU에 텍스처로 업로드됩니다. 그다음 텍스처들은 서로 합쳐져 하나의 이미지로 렌더링되며 화면으로 출력됩니다.
Q. 렌더객체와 렌더레이어는 1:1 대응일까요?
- NO : display:none으로 사라지는 노드들이 있을 수 있기 때문입니다. 하지만 DOM 트리와 렌더트리는 1:1대응이 됩니다. 이렇게 렌더트리가 생성된 후 렌더레이어에 올려지게 됩니다. 렌더레이어가 완성될 때 GPU에서 처리되는 부분(CSS3D / video & canvas / filter / animation/ transform : translateZ(0) 등)이 있으면 이 요소들은 각각 강제적으로 그래픽 레이어(Graphic Layer)로 분리됩니다.