브라우저에서는 화면을 어떻게 그릴까?

브라우저에서 화면을 그리는 과정을 브라우저 렌더링이라 합니다.

브라우저 렌더링 원리와 순서는 크게 다음과 같은 단계로 구성됩니다.

1. DOM 트리를 생성합니다. (Parsing)
   브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성합니다. 이때, HTML 태그를 노드로 변환하고, 노드간의 계층 관계를 형성합니다.
2. CSSOM 트리를 생성합니다. (Parsing)
   브라우저는 CSS 파일을 파싱하여 CSSOM 트리를 생성합니다. 이때, CSS 속성을 노드로 변환하고, 노드간의 계층 관계를 형성합니다.
3. 두 개의 트리를 결합하여 렌더 트리를 생성 합니다. (Style)
   DOM트리와 CSSOM을 결합하여 렌더 트리를 생성 합니다. 이때, 실제 화면에 표시될 요소만을 선택하여 렌더 트리를 형성합니다.
4. Rendering Tree에서 각 노드의 위치와 크기를 계산합니다. (Layout)
5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만듭니다. (Paint)
   이때, 요소의 배경, 테두리, 글자 등을 그리게 됩니다.
6. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)
   Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냅니다.

요약
DOM 트리와 CSSOM 트리를 만들고, 렌더 트리로 결합합니다.
렌더 트리에서 노드의 위치와 크기를 계산을 수행하고, 계산된 값을 이용해 각 노드를 픽셀로 변환하여 레이어로 만듭니다.
생성된 레이어는 합성하여 실제 화면에 나타냅니다.

참고 1:
https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path#understanding_crp
참고 2:
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/