브라우저가 HTML, CSS 파일을 받아서 실제로 화면에 보여주기까지의 과정을
"렌더링 파이프라인(Rendering Pipeline)" 이라고 부른다.
이 과정을 단계별로 이해하면, 성능 최적화, 레이아웃 디버깅, 애니메이션 처리 등에 큰 도움이 된다.
전체 흐름
렌더링 파이프라인 6단계
1. DOM 생성
- HTML 문서를 브라우저가 바이트로 읽어들인 뒤 문자 → HTML 토큰으로 파싱
- 이를 기반으로 DOM Tree 생성
- DOM은 문서의 구조를 나타낸 트리 구조
<body>
<div>Hello</div>
</body>DOM Tree
└─ body
└─ div2. CSSOM 생성
- CSS 파일을 생성하여 CSSOM Tree 생성
- 각 노드는 선택자와 그에 대응하는 스타일 정보를 포함
div {
color: red;
}CSSOM Tree
└─ div
└─ color: red3. 렌더 트리 생성
- DOM + CSSOM을 결합하여 렌더 트리 생성
- display: none 요소는 제외됨
- 시각적으로 표현되는 요소만 포함됨
Render Tree
└─ div (color: red)4. 레이아웃 -> aka.Reflow
- 각 요소의 위치와 크기 계산
- 뷰포트 크기 등을 고려
- 이 단계에서 Reflow 발생 가능 -> 성능 영향 큼
예시 : 창 크기 변경, 글자 수 변화, margin/padding 변경
5. 페인팅
- 각 요소에 대한 시각적 표현을 그림
- 텍스트, 색상, 테두리, 그림자 등
- 복잡한 페인팅은 성능에 영향 큼
예시 : box-shadow, border-radius, gradient 등
6. 컴포지팅
- 요소들을 레이어 단위로 나누고 GPU로 합성
- transform, opacity 등은 이 단계에서만 처리
- 레이아웃/페인트를 다시 하지 않기 때문에 애니메이션 ㅅ ㅓㅇ능이 좋음
성능 최적화를 위해 기억할 점
display: none,visibility: hidden,transform,opacity의 차이 이해- Reflow / Repaint / Compositing 비용 구분
- 애니메이션은 가능하면
transform,opacity만 사용 -> GPU 처리
렌더링 파이프라인을 이해하면, 왜 특정 CSS가 느려지는지, 어떤 DOM 조작이 Reflow를 유발하는지 예측할 수 있다.
프론트엔드 성능 최적화의 핵심 지식! 꼭 익혀두자 💪
개발 공부 블로그