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

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
@@ -1,6 +1,6 @@
# [[리플로우(Reflow)]]
# [[리플로우(Reflow)|리플로우(Reflow]]
## 📌[[ brief]] Summary
## 📌 Brief Summary
리플로우(Reflow)는 웹 페이지의 레이아웃이나 구조가 변경될 때, 브라우저가 전체 페이지 또는 일부 영역의 기하학적 구조(크기, 위치 등)와 레이아웃을 다시 계산하는 과정입니다 [1, 2]. 이는 브라우저의 렌더링 파이프라인 중 가장 리소스를 많이 소모하는 작업으로, 과도하게 발생할 경우 애니메이션이 끊기거나 스크립트 실행이 느려지는 등 프론트엔드 성능을 크게 저하시키는 주요 원인이 됩니다 [3, 4]. 따라서 유지보수 가능하고 확장성 있는 CSS 아키텍처 설계 시 리플로우를 최소화하는 것은 필수적인 최적화 과제입니다 [4, 5].
## 📖 Core Content
@@ -12,7 +12,7 @@
* **성능에 미치는 영향**
* 리플로우는 전체 페이지의 레이아웃을 다시 잡는 것과 맞먹을 정도로 성능 비용이 높습니다 [3].
* 특히 스크립트가 DOM의 값을 읽고 쓰는 작업을 반복하는 **레이아웃 스래싱([[Layout Thrashing]])**이 발생하면, 브라우저가 내부 레이아웃 큐를 강제로 비우고 동기적으로 리플로우를 수행해야 하므로 프레임 속도(FPS)가 급격히 떨어집니다 [9, 10].
* 특히 스크립트가 DOM의 값을 읽고 쓰는 작업을 반복하는 **레이아웃 스래싱([[Layout Thrashing|Layout Thrashing]])**이 발생하면, 브라우저가 내부 레이아웃 큐를 강제로 비우고 동기적으로 리플로우를 수행해야 하므로 프레임 속도(FPS)가 급격히 떨어집니다 [9, 10].
* **최적화 및 감소 기법**
* **애니메이션 최적화:** 애니메이션에는 레이아웃 속성 대신 `transform``opacity`를 사용해야 합니다. 이 속성들은 리플로우와 리페인트 단계를 건너뛰고 GPU 가속을 통해 Composite 단계만 거치므로 성능에 유리합니다 [7, 11].
@@ -23,8 +23,8 @@
* **사전 힌트 제공:** 변경이 빈번한 요소에는 `will-change` 속성을 사용하여 브라우저가 렌더링 최적화를 미리 준비할 수 있도록 힌트를 제공합니다 [10, 16].
## 🔗 Knowledge Connections
- **Related Topics:** [[리페인트(Repaint)]], [[레이아웃 스래싱(Layout Thrashing)]], CSS 애니메이션 성능 최적화, DOM 조작(DOM Manipulation), [[렌더링 파이프라인(Rendering Pipeline)]]
- **Projects/Contexts:** CSS 실전 설계, [[성능 최적화(Performance [[Optimization]])]], 유지보수 가능한 프론트엔드 아키텍처
- **Related Topics:** [[리페인트(Repaint)|리페인트(Repaint]], 레이아웃 스래싱(Layout Thrashing), CSS 애니메이션 성능 최적화, DOM 조작(DOM Manipulation), [[렌더링 파이프라인(Rendering Pipeline)|렌더링 파이프라인(Rendering Pipeline]]
- **Projects/Contexts:** CSS 실전 설계, [[성능 최적화(Performance Optimization)|성능 최적화(Performance Optimization]], 유지보수 가능한 프론트엔드 아키텍처
- **Contradictions/Notes:** 리플로우는 성능 저하의 주범이므로 피하는 것이 일반적인 원칙이지만, 때로는 브라우저의 디스플레이 오류(예: 탭 전환 시 높이가 맞지 않거나 리스트 정렬이 깨지는 현상)를 바로잡기 위해 의도적으로 더미 클래스를 추가하거나 디스플레이를 토글하여 강제로 리플로우를 유발하는 기법이 사용되기도 합니다 [17, 18].
---