브라우저의 렌더링 과정(Critical Rendering Path)을 설명해주세요.

브라우저가 HTML, CSS, JS를 받아 화면에 픽셀을 그리기까지의 단계를 Critical Rendering Path라고 합니다.

렌더링 단계

1. DOM 트리 구축 (DOM Tree Construction):

   • 브라우저가 HTML을 한 줄씩 읽으며(Parsing) 노드(Node)를 생성합니다.
   • 이 노드들을 트리 구조로 연결하여 DOM(Document Object Model) 트리를 만듭니다.

2. CSSOM 트리 구축 (CSSOM Tree Construction):

   • HTML을 읽다가 <link>나 <style>을 만나면 CSS를 파싱합니다.
   • 스타일 규칙들을 계층적인 CSSOM(CSS Object Model) 트리로 만듭니다.

3. Render Tree 생성 (Render Tree Construction):

   • DOM 트리와 CSSOM 트리를 결합하여 화면에 실제로 보일 요소들만 모은 Render Tree를 만듭니다.
   • display: none; 속성이 붙은 요소는 Render Tree에서 제외됩니다. (visibility: hidden;은 포함됨)

4. Layout 단계 (Layout / Reflow):

   • Render Tree의 각 노드가 화면의 어느 위치에, 어떤 크기로 배치될지 계산합니다. (기하학적 계산)
   • 뷰포트(Viewport)를 기준으로 상대적인 위치를 절대적인 픽셀 값으로 변환합니다.

5. Paint 단계 (Paint):

   • 계산된 위치와 크기를 바탕으로 실제 픽셀을 채웁니다. (색상, 이미지, 텍스트 등)
   • 레이어(Layer)를 나누어 그려지기도 합니다.

6. Composite 단계 (Compositing):

   • 나누어진 레이어들을 올바른 순서로 합쳐서 최종 화면을 완성합니다.

성능 최적화 팁

• Reflow(Layout) 최소화: 요소의 크기, 위치를 바꾸는 작업은 Layout 단계를 다시 트리거하므로 비용이 큽니다.
• Repaint 최소화: 색상 변경 등은 Layout은 피하지만 Paint를 일으킵니다.
• CSS 최적화: 불필요한 선택자 사용을 줄이고, transform이나 opacity처럼 Composite 단계만 사용하는 속성을 활용하면 성능이 좋아집니다.