브라우저 렌더링 파이프라인
브라우저 렌더링 파이프라인
브라우저 렌더링 파이프라인에 대해서 설명해주세요 !
웹 페이지가 화면에 보이기까지는 여러 단계를 거칩니다. 이 과정을 브라우저 렌더링 파이프라인이라고 부르며, 크게 6단계로 나눌 수 있습니다.
1. DOM 생성 (문서 구조 만들기)
- HTML 파싱 : 브라우저는 HTML파일을 파싱하여 DOM을 생성
- DOM(Document Object Model) : HTML 문서를 트리구조로 표현한 객체 모델 HTML 예시
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
DOM 구조
1
2
3
4
5
6
Document
└── <html>
├── <head>
└── <body>
└── <h1>
└── "Hello, World!"
<body> 안에 <h1>이 있으면 DOM에서도 <body> 노드 밑에 <h1> 노드가 생김.
2. CSSOM 생성 (스타일 규칙 정리하기)
- 브라우저는 CSS 파일을 파싱(parse)하여 CSSOM 트리를 생성
- CSSOM(CSS Object Model) : 스타일 정보를 담고 있는 트리 구조
CSS 예시
1
2
3
4
h1 {
color: red;
font-size: 24px;
}
CSSOM 구조
1
2
3
4
CSSOM
└── h1
├── color: red
└── font-size: 24px
3. Render Tree 생성 (보여줄 요소만 선별)
- DOM + CSSOM → 합쳐서 렌더 트리(Render Tree) 생성.
- Render Tree는 렌더링할 요소와 그 스타일 정보를 포함한 트리 구조
- 여기에는 실제로 화면에 보이는 요소만 포함됩니다.
Render Tree 특징
display : none은 Render Tree에 포함되지 않는다.visibility : hidden은 포함되나, 화면에 표시되지 않는다.
4. 레이아웃 (Layout / Reflow)
- Render Tree 기반으로 각 요소의 위치와 크기를 계산하는데 → 이를 레이아웃(
Layout) 또는Reflow라고 한다. - 브라우저는 요소들이 화면의 어느 위치, 어떤 크기로 배치될지 계산한다.
- 화면 크기나 스타일 변경 시 Reflow가 다시 발생할 수 있다.
- 리플로우는 성능에 부담이 크므로, 최소화하는 게 중요합니다.
5. 페인팅 (Painting)
- 레이아웃 단계에서 계산된 위치와 스타일을 기반으로 화면에 픽셀을 그린다.
- 이 때 배경색, 텍스트 색상, 그림자, 이미지 등 시각적 스타일이 적용된다.
6. 합성 (Compositing)
- 페인팅 된 레이어를 조합하여 최종적으로 화면에 표시
- 브라우저는 레이어를 GPU로 전달하여 화면에 빠르게 렌더링한다.
- transform, opacity 같은 속성은 레이아웃이나 페인트를 건너뛰고 바로 이 단계에서 처리됩니다.
📌 정리
- HTML 파싱 → DOM 생성
- CSS 파싱 → CSSOM 생성
- Render Tree 생성
- Render Tree → 레이아웃 / Reflow 계산
- 레이아웃 결과 → 페인팅
- 페인팅 결과 → 합성하여 브라우저 화면에 표시
END
This post is licensed under CC BY 4.0 by the author.