- HTML 파싱 (Parsing)
- 브라우저는 HTML을 위에서 아래로 파싱하면서 DOM(Document Object Model)을 만든다.
- CSS 파싱
- HTML 안에
<link>나<style>태그를 만나면 CSS를 파싱해서 CSSOM(CSS Object Model)을 만든다.
- HTML 안에
- DOM + CSSOM = Render Tree 생성
- 렌더 트리는 실제 보여줄 요소만 골라낸 구조다.
- Layout (Reflow)
- 각 요소의 크기와 위치 계산이 이루어진다.
- Painting (페인트)
- 픽셀로 화면에 그리는 작업이 실행된다.
- Compositing
- 레이어를 합쳐서 최종적으로 브라우저에 보여주는 단계.
🚫 렌더링 차단 요소 (Critical Rendering Path에서 방해되는 것들)
1. ❗ CSS
- 렌더링을 차단함
- 이유: 브라우저는 렌더 트리 만들기 전에 CSSOM이 완성되어야 하기 때문에.
- 즉,
<link rel="stylesheet">가 완전히 다운로드+파싱될 때까지 화면 안 그린다.
2. ⚠️ JS (스크립트)
- 기본적으로 HTML 파싱도 차단한다.
- 이유: JS가 DOM을 조작할 수도 있기 때문에 브라우저는 JS 실행 전에 파싱을 멈춤.
<script>가<head>에 있을 경우: HTML 파싱이 멈추고 JS 다운로드 및 실행 기다림.<script defer>: HTML 파싱은 멈추지 않고 DOM 완성 후 실행됨 (렌더링 차단 X).<script async>: 병렬로 다운로드 + 바로 실행, 하지만 실행 타이밍이 예측 불가.
🔥 정리 한줄 요약
CSS는 렌더링 차단, JS는 파싱 차단. 위치와 속성(defer/async)에 따라 영향이 다름.
그냥저냥개발자