Antigravity Agent
21 lines
4.7 KiB
Markdown
21 lines
4.7 KiB
Markdown
# [[브라우저 렌더링 프로세스 (CRP)|브라우저 렌더링 프로세스 (CRP]]
|
|
|
|
## 📌 Brief Summary
|
|
브라우저 렌더링 프로세스, 즉 중요 렌더링 경로([[Critical Rendering Path|Critical Rendering Path]], CRP)는 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 변환하기 위해 실행하는 일련의 단계입니다 [1, 2]. 이 과정은 DOM 및 [[CSSOM|CSSOM]] 트리 생성, 렌더 트리 합성, 레이아웃(Reflow) 계산, 그리고 화면에 픽셀을 그리는 페인트(Paint) 및 합성(Composite) 단계로 구성됩니다 [2, 3]. 이 경로를 최적화하는 것은 첫 렌더링 시간을 단축하고, 원활한 사용자 상호작용을 보장하며 성능 병목현상을 피하기 위한 프론트엔드 엔지니어링의 핵심 목표입니다 [1, 4].
|
|
|
|
## 📖 Core Content
|
|
브라우저 렌더링 프로세스는 코드가 화면의 시각적 요소로 변환되는 과정으로, 다음과 같은 핵심 단계들을 거칩니다:
|
|
|
|
* **문서 객체 모델(DOM) 구축:** 브라우저가 서버로부터 HTML 데이터를 수신하면, 바이트를 문자, 토큰, 노드로 순차적으로 변환하여 계층적인 DOM 트리를 구성합니다 [1, 5]. 이 DOM 구축은 점진적으로 진행되므로 브라우저는 네트워크 요청이 활성화된 상태에서도 트리를 구축할 수 있습니다 [1, 6]. 그러나 노드 수가 많아질수록 이후의 렌더링 단계에서 더 많은 계산 시간이 소요됩니다 [6, 7].
|
|
* **CSS 객체 모델(CSSOM) 구축:** CSS는 콘텐츠가 어떻게 스타일링될지 정의합니다. DOM 구축과 달리 CSSOM 구축은 점진적이지 않으며 렌더링을 차단(render-[[Blocking|Blocking]])하는 작업입니다 [6, 7]. 브라우저는 스타일이 적용되지 않은 콘텐츠가 화면에 노출되는 현상(FOUC)을 방지하기 위해 연결된 모든 스타일시트를 다운로드하고 파싱할 때까지 렌더 트리를 빌드하지 않습니다 [6, 7].
|
|
* **렌더 트리([[Render Tree|Render Tree]]) 합성:** DOM과 CSSOM이 모두 준비되면 브라우저는 두 트리를 결합하여 렌더 트리를 만듭니다 [8, 9]. 이 트리는 화면에 렌더링하는 데 필요한 노드만 포함하므로, `<script>`, `<meta>` 태그나 CSS에서 `display: none`으로 설정된 요소는 렌더 트리에 포함되지 않습니다 [8-10].
|
|
* **레이아웃(Layout) 또는 리플로우(Reflow):** 렌더 트리가 구성되면 브라우저는 기기의 뷰포트 크기와 박스 모델을 기반으로 각 시각적 요소의 정확한 위치와 치수(너비, 높이 등)를 계산합니다 [11-13]. 화면 크기 조정이나 DOM의 추가/삭제와 같은 변경이 일어나면 페이지 전체의 레이아웃을 다시 계산해야 하며 이를 리플로우(Reflow)라고 부르는데, 이는 계산 비용이 매우 높습니다 [11, 14, 15].
|
|
* **페인트(Paint) 및 합성(Compositing):** 레이아웃 계산이 완료되면 기하학적 구조와 스타일을 바탕으로 브라우저는 화면의 픽셀을 채우는 페인트(Repaint) 단계를 거칩니다 [16-18]. 색상, 그림자 등의 시각적 속성을 업데이트하는 페인트 작업은 리플로우보다는 자원 소모가 덜하지만 과도하게 발생하면 성능에 영향을 줍니다 [19, 20]. 마지막으로 여러 레이어를 단일 이미지로 결합하는 합성(Compositing) 단계를 거치며, 최신 브라우저들은 렌더링 성능 최적화를 위해 특정 작업들을 GPU(그래픽 처리 장치)로 오프로드합니다 [16, 21].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[DOM 및 CSSOM|DOM 및 CSSOM]], Reflow 및 Repaint, Virtual DOM, [[렌더링 차단 리소스(Render-blocking resources)|렌더링 차단 리소스(Render-blocking resources]]
|
|
- **Projects/Contexts:** [[프론트엔드 성능 최적화(Frontend Performance Optimization)|프론트엔드 성능 최적화(Frontend Performance Optimization]], [[단일 페이지 애플리케이션(SPA) 렌더링 설계|단일 페이지 애플리케이션(SPA) 렌더링 설계]]
|
|
- **Contradictions/Notes:** 주어진 소스들 간에 렌더링 과정과 관련하여 기술적인 모순은 없으나, 최적화의 우선순위 측면에서 단순히 페인트(Paint) 시간을 줄이는 미세한 CSS 선택자 성능 최적화보다는 레이아웃(Reflow) 발생을 최소화하거나 불필요한 DOM 노드를 줄이는 것이 훨씬 큰 성능 향상을 가져온다는 점을 주의해야 합니다 [14, 17, 22].
|
|
|
|
---
|
|
*Last updated: 2026-04-25* |