브라우저 렌더링 파이프라인 완전 분석

웹 성능을 이해하려면 브라우저가 어떤 순서로 화면을 그리는지 알아야 합니다.

이 글은 렌더링 파이프라인을 큰 흐름부터 정리한 임시 학습 노트입니다.

주요 단계

1. Parse — HTML/CSS를 DOM, CSSOM으로 변환
2. Render Tree — DOM + CSSOM 조합
3. Layout — 요소 위치·크기 계산
4. Paint — 픽셀 그리기
5. Composite — 레이어 합성

왜 중요할까?

• transform, opacity는 Composite 단계에서 처리되어 reflow를 피하기 쉽습니다.
• layout thrashing은 Layout 단계를 반복 호출할 때 발생합니다.

임시 글입니다. 레이아웃 확인용 초안이에요.