브라우저 렌더링 파이프라인

브라우저 렌더링 파이프라인

브라우저 렌더링 파이프라인은 브라우저가 HTML, CSS, JavaScript 파일을 처리하여 웹 페이지를 화면에 표시하는 과정을 말하며, 6단계로 나뉜다.

1. DOM 생성 (Document Object Model)

• 브라우저는 HTML 파일을 바이트 단위로 수신하여 이를 문자로 변환하는데, 문자를 HTML 토큰으로 파싱하고, 이 토큰을 기반으로 DOM 트리를 생성한다.
• DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 태그는 노드로, 태그 간의 계층 구조는 부모-자식 관계로 나타난다.

2. CSSOM 생성 (CSS Object Model)

• 브라우저는 CSS 파일도 바이트로 수신하여 문자로 변환한 뒤, 이를 CSS 규칙으로 파싱한다.
• CSS 규칙은 선택자와 선언으로 구성되며, 브라우저는 이를 기반으로 CSSOM 트리를 생성한다.
• CSSOM 트리는 DOM 트리와 유사한 구조를 가지며, 각 노드에는 해당 요소에 적용될 스타일 정보가 포함된다.

3. 렌더 트리 생성

• 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성하는데, 렌더 트리는 화면에 표시될 요소들만 포함하며, display: none처럼 화면에 그려지지 않는 요소는 제외된다.
• 이 트리는 DOM의 구조와 CSSOM의 스타일 정보를 모두 반영한 트리로, 브라우저가 렌더링을 위해 활용한다.

4. 레이아웃 (Layout)

• 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하며, 브라우저는 뷰포트 크기 등 화면 정보를 사용하여 요소들의 정확한 배치를 결정한다.
• 화면 크기가 변경되거나 DOM이 수정되면 레이아웃 과정을 다시 수행하게 되는데, 이를 리플로우(Reflow)라고 부르며,  리플로우는 성능에 영향을 줄 수 있으므로 최소화하는 것이 중요하다.

5. 페인팅 (Painting)

• 레이아웃이 완료되면 각 요소를 화면에 그리는 작업을 수행한다.
• 이 단계에서는 텍스트, 색상, 이미지, 그림자 등 시각적 스타일을 캔버스에 그리며, 요소의 복잡성과 애니메이션은 페인팅 작업량에 영향을 주고, 성능에 중요한 영향을 미친다.

6. 컴포지팅 (Compositing)

• 브라우저는 화면에 그려질 요소를 개별 레이어로 나누고, 이 레이어들을 GPU를 활용해 결합하여 최종 화면을 구성한다.
• transform 이나 opacity 같은 속성은 레이아웃과 페인팅을 건너뛰고 컴포지팅 단계에서 처리되므로, 이러한 속성을 사용하는 애니메이션은 더 효율적이고 부드럽게 실행된다.

주 최적화 포인트는 리플로우와 페인팅 작업을 최소화하여 성능을 높이는 것이 중요하며, GPU 가속을 활용하는 속성을 적절히 사용하면 렌더링 효율을 높일 수 있다.