브라우저는 DOM, CSSOM을 합쳐 Render Tree를 만들고, Layout → Paint → Composite 순으로 픽셀을 만듭니다.

🛤️ Critical Rendering Path

1. Parse — HTML → DOM, CSS → CSSOM (render-blocking CSS)
2. JavaScript — <script> 실행 시 파싱 중단 가능
3. Render Tree — DOM + CSSOM, display:none 등 제외
4. Layout (Reflow) — 박스 크기, 위치 계산
5. Paint — 텍스트, 색, 그림자 등 픽셀 채우기
6. Composite — 레이어를 GPU에서 합성

⚡ 성능 관련

• CSS는 head 상단, JS는 defer/async 또는 body 하단
• Critical CSS 인라인으로 FCP 개선
• transform, opacity 변경은 often Composite only (Layout/Paint 생략 가능)

🔗 참고 자료

• Critical rendering path (MDN) — DOM, CSSOM, Render Tree, Layout, Paint 흐름을 설명한다.
• Critical Rendering Path (web.dev) — 첫 렌더까지의 브라우저 처리 단계를 개요로 정리한다.
• Understand the critical path (web.dev) — render-blocking 자원과 초기 렌더 제약을 다룬다.
• Eliminate render-blocking resources (Lighthouse) — 렌더 차단 자원을 줄이는 감사, 대응을 안내한다.