docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# [[Reflow and Repaint]]
|
||||
# [[Reflow and Repaint|Reflow and Repaint]]
|
||||
|
||||
## 📌[[ brief]] Summary
|
||||
## 📌 Brief Summary
|
||||
Reflow(리플로우)는 요소의 너비, 높이 등 레이아웃에 영향을 미치는 변경이 발생할 때 브라우저가 페이지의 구조를 다시 계산하는 과정이며, Repaint(리페인트)는 배경색 등 시각적 요소만 변경될 때 레이아웃 계산 없이 화면을 다시 그리는 작업입니다 [1, 2]. 이 두 과정은 비용이 많이 드는 작업으로 브라우저 렌더링 성능에 큰 영향을 미치며, 특히 애니메이션이나 동적 UI를 구현할 때 성능 저하와 버벅거림(Jank)의 주된 원인이 됩니다 [1, 3, 4]. 따라서 유지보수 가능하고 확장성 있는 CSS를 설계하기 위해서는 리플로우와 리페인트를 최소화하는 렌더링 최적화 전략이 필수적입니다 [5-7].
|
||||
|
||||
## 📖 Core Content
|
||||
@@ -11,7 +11,7 @@ Reflow(리플로우)는 요소의 너비, 높이 등 레이아웃에 영향을
|
||||
|
||||
* **성능 저하를 유발하는 주요 원인**
|
||||
* 창 크기 조절, 폰트 변경, DOM 스크립트 조작, CSS 가상 클래스(`:hover` 등) 활성화, 클래스 속성 변경, `offsetWidth` 및 `offsetHeight` 계산 등 다양한 작업이 리플로우를 유발합니다 [9, 10].
|
||||
* DOM을 읽고 쓰는 작업을 짧은 루프 안에서 연속적으로 실행하면 브라우저가 강제로 동기적 리플로우를 수행해야 하는 레이아웃 스래싱([[Layout Thrashing]])이 발생하여 프레임 속도가 크게 저하됩니다 [11, 12].
|
||||
* DOM을 읽고 쓰는 작업을 짧은 루프 안에서 연속적으로 실행하면 브라우저가 강제로 동기적 리플로우를 수행해야 하는 레이아웃 스래싱([[Layout Thrashing|Layout Thrashing]])이 발생하여 프레임 속도가 크게 저하됩니다 [11, 12].
|
||||
* 크기나 여백 같은 레이아웃 속성을 애니메이션으로 처리하면 브라우저가 렌더링 엔진을 매 프레임마다 호출해야 하므로 성능에 치명적입니다 [1, 3].
|
||||
|
||||
* **Reflow 및 Repaint 최적화(감소) 기법**
|
||||
@@ -23,8 +23,8 @@ Reflow(리플로우)는 요소의 너비, 높이 등 레이아웃에 영향을
|
||||
* **애니메이션 주기의 동기화:** `requestAnimationFrame`을 사용하여 자바스크립트 애니메이션을 브라우저의 기본 리페인트 주기와 동기화해야 합니다 [11, 12].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSS Animations]], [[Layout Thrashing]], [[GPU Acceleration (Compositing)]], [[CSS Architecture]]
|
||||
- **Projects/Contexts:** 애니메이션 (transition / keyframes) 성능 최적화, [[실무에서 CSS 관리하는 방법]]
|
||||
- **Related Topics:** [[CSS Animations|CSS Animations]], Layout Thrashing, GPU Acceleration (Compositing), [[CSS Architecture|CSS Architecture]]
|
||||
- **Projects/Contexts:** 애니메이션 (transition / keyframes) 성능 최적화, [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
|
||||
- **Contradictions/Notes:** 브라우저 성능 최적화를 돕는 `will-change` 속성은 유용하지만, 최후의 수단으로만 사용해야 합니다. 이를 성능 문제 예측용으로 무분별하게 너무 많은 요소에 남용할 경우, 과도한 메모리 사용 등 그 자체로 심각한 성능 저하를 초래할 수 있다고 경고하고 있습니다 [19, 20].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user