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

📋렌더링 파이프라인?

브라우저가 html, css, javascript같은 리소스를 처리하여 화면에 웹 페이지를 렌더링한다. 이 과정을 렌더링 파이프라인(Rendering Pipeline) 이라고 한다.

 

렌더링 파이프라인 과정

렌더링 파이프라인 과정 다이어그램

1. DOM 생성 (Parsing HTML → DOM Tree)

브라우저는 서버에서 HTML 파일을 전달받으면 이를 바이트 → 문자 → 토큰 → 노드 로 변환한다. 변환된 노드들은 서로 연결되어 DOM Tree(Document Object Model) 를 구성하게 된다. DOM은 문서의 구조를 나타내는 트리로, 각 태그가 노드 형태로 존재한다.

2. CSSOM 생성 (Parsing CSS → CSSOM Tree)

CSS 파일 역시 파싱 과정을 거쳐 선택자와 선언으로 나뉘게 된. 이 정보들을 기반으로 CSSOM Tree 가 생성되며, 이는 각 요소에 어떤 스타일이 적용될지 정의한다.

3. 렌더 트리(Render Tree) 생성

라우저는 DOM과 CSSOM을 결합하여 렌더 트리(Render Tree) 를 만든다. 렌더 트리에는 실제 화면에 보이는 요소만 포함된다. 예를 들어 display: none 속성이 적용된 요소는 제외된다. 각 렌더 트리 노드는 DOM 요소와 해당 요소에 적용된 스타일 정보를 모두 가지고 있다.

4. 레이아웃(Layout, Reflow)

렌더 트리가 완성되면 브라우저는 각 노드의 위치와 크기를 계산한다. 이 과정을 레이아웃(Layout) 또는 리플로우(Reflow) 라고 한다. 화면 크기 변경이나 폰트 크기 변경과 같이 레이아웃에 영향을 주는 상황이 발생하면 레이아웃 과정이 다시 실행된다. 이때 발생하는 리플로우는 성능에 큰 영향을 줄 수 있으므로 최소화하는 것이 중요하다.

5. 페인팅(Painting)

레이아웃 결과에 따라 색상, 텍스트, 그림자, 이미지 등 실제 픽셀을 그리는 단계다. 복잡한 스타일이나 애니메이션이 많으면 페인팅 비용이 커져 성능 저하가 발생할 수 있다.

6.컴포지팅(Compositing)

마지막으로 브라우저는 화면을 여러 레이어(Layer) 로 나누어 GPU에서 합성한다. transform, opacity 같은 속성은 레이아웃이나 페인트를 거치지 않고 바로 컴포지팅 단계에서 처리되기 때문에 성능에 유리하다. GPU 가속을 활용해 최종 화면을 빠르게 만들어낸다.

 

---

📌 면접 포인트 정리

• 브라우저 렌더링은 DOM → CSSOM → Render Tree → Layout → Paint → Composite 6단계로 진행된다.
• 성능 최적화 핵심:
  • 불필요한 리플로우(Reflow) 와 리페인트(Repaint) 최소화
  • 가능하면 transform,  opacity 기반 애니메이션 활용
• 면접 질문 예시:
  • “레이아웃과 페인팅의 차이를 설명해보세요.”
  • “왜 transform과 opacity 애니메이션이 성능에 유리할까요?”