[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/Reflow and Repaint.md

@@ -1,6 +1,6 @@
 # [[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]])이 발생하여 프레임 속도가 크게 저하됩니다 [11, 12]. 
     *   크기나 여백 같은 레이아웃 속성을 애니메이션으로 처리하면 브라우저가 렌더링 엔진을 매 프레임마다 호출해야 하므로 성능에 치명적입니다 [1, 3].
 
 *   **Reflow 및 Repaint 최적화(감소) 기법**