웹 브라우저에 대해서 (3)

CSS 파싱(CSS Parsing)

HTML 파싱을 통해 DOM을 생성하는 것과 유사하게 CSS 파싱 또한 CSSOM(CSS Object Model)을 생성한다.

과정 또한 매우 유사한게, Bytes → Characters → Tokens → Nodes → CSS Object Model 순으로 진행된다.  

그림 1) CSSOM

페이지 내 모든 요소들의 스타일을 적용될 때, 해당 노드의 스타일은 부모 요소로부터 상속을 받게된다.

---

렌더 트리(Render Tree)

렌더 트리는 DOM 트리 및 CSSOM을 결합하여 생성된다.

이 때 <meta> 및 <script> 태그 등과 같이 비시각적인 노드들을 제외하고. 시각적인 노드들의 스타일을 계산한다.

그림 2) 렌더 트리

---

레이아웃

렌더 트리를 통해 화면에 나타나야할 노드와 해당 노드의 스타일이 계산되었다면, 레이아웃은 화면에서 노드의 정확한 위치와 크기를 계산하는 단계이다.

 

브라우저는 렌더 트리의 루트부터 순회하면서 페이지 내 각 개체의 정확한 위치를 파악한다.

---

페인팅

렌더 트리와 레이아웃 단계를 거쳐 표시되는 노드와 해당 노드의 계산된 스타일 및 위치에 대해 파악했다면, 이후 "Paint Setup" 및 "Paint" 이벤트가 발생되어 페인팅 단계에 들어가게 된다.

페인팅 단계는 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계이다.

페인팅 단계는 처리해야 할 작업이 굉장이 많아 각 단계 중 가장 많은 시간이 걸리는 단계이다.

그림 3) 개발자 도구 - 네트워크를 통해 페인팅에 소모되는 시간을 볼 수 있다.

 

---

정리

그림 4) 렌더링 엔진의 동작과정

1. HTML 마크업을 처리하고 DOM 트리를 빌드한다.
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다.
3. DOM 및 CSSOM을 결합하여 렌더 트리를 형성한다.
4. 렌더 트리에서 레이아웃을 실행하여 각 노드의 위치 및 정확한 크기를 계산한다.
5. 페인팅 단계를 통해 개별 노드를 화면에 출력한다.

---

참고자료

Web - 렌더링 트리 생성, 레이아웃 및 페인트