bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics_Art/UI_UX_Assets/브라우저 렌더링 과정 (Critical Rendering Path).md
+3 -3
View File
@@ -1,4 +1,4 @@
# [[브라우저 렌더링 과정 (Critical Rendering Path)]]
# [[브라우저 렌더링 과정 (Critical Rendering Path)|브라우저 렌더링 과정 (Critical Rendering Path)]]
## 📌 Brief Summary
브라우저 렌더링 과정(Critical Rendering Path)은 브라우저가 수신한 HTML, CSS, JavaScript 코드를 화면의 실제 픽셀로 변환하기 위해 거치는 일련의 순차적인 단계를 의미합니다 [1, 2]. 이 과정은 DOM과 CSSOM의 생성, 렌더 트리(Render Tree) 구축, 기하학적 형태를 계산하는 레이아웃(Layout), 그리고 픽셀을 그리는 페인트(Paint) 및 합성(Composite) 단계로 이루어집니다 [3, 4]. 렌더링 경로를 최적화하여 렌더링 차단 요소를 최소화하는 것은 웹 페이지의 초기 렌더링 속도를 높이고 사용자 경험(UX)을 향상시키는 프론트엔드 성능 최적화의 핵심입니다 [1, 5, 6].
@@ -12,8 +12,8 @@
* **크리티컬 렌더링 패스 최적화:** 브라우저는 `<head>` 태그 내부에 있는 렌더링 차단 CSS 및 파서 차단(Parser-blocking) 동기식 JavaScript가 모두 처리될 때까지 화면을 렌더링하지 않습니다 [24-26]. 반면 이미지, 폰트, 그리고 지연 로드(async/defer) 설정이 된 스크립트 등은 초기 렌더링을 차단하지 않습니다 [27]. 따라서 불필요한 리소스의 다운로드를 지연시키거나 파일 크기를 최적화하는 것이 렌더링 경로 최적화의 기본 원칙입니다 [28, 29].
## 🔗 Knowledge Connections
- **Related Topics:** [[DOM]], [[CSSOM]], [[Render Tree]], [[Reflow 및 Repaint]]
- **Projects/Contexts:** [[프론트엔드 렌더링 성능 최적화]], [[Core Web Vitals 최적화 (FCP, LCP 등)]]
- **Related Topics:** [[DOM|DOM]], [[CSSOM|CSSOM]], [[Render Tree|Render Tree]], [[Reflow 및 Repaint|Reflow 및 Repaint]]
- **Projects/Contexts:** 프론트엔드 렌더링 성능 최적화, Core Web Vitals 최적화 (FCP, LCP 등)
- **Contradictions/Notes:** 제공된 소스들은 브라우저 렌더링 과정에 대해 모순 없이 일관된 설명을 제공합니다. 특히 `display: none`(렌더 트리에서 제외됨)과 `visibility: hidden`(레이아웃 공간을 차지하므로 렌더 트리에 포함됨)의 처리 방식 차이를 명확히 대조하여 설명하고 있습니다 [13].
---