[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/성능 최적화(Performance Optimization).md

@@ -1,7 +1,7 @@
-# [[성능 최적화(Performance Optimization)]]
+# [[성능 최적화(Performance [[Optimization]])]]
 
-## 📌 Brief 코Summary
-성능 최적화(Performance Optimization)는 브라우저가 CSS를 처리하는 방식을 이해하고, 렌더링을 지연시키거나 불필요한 연산을 유발하는 요소를 최소화하여 웹 페이지의 로딩 속도와 반응성을 향상시키는 과정입니다 [1]. 주로 렌더링 블로킹(Render-blocking) CSS 파일의 분할, 리플로우(Reflow)와 리페인트(Repaint)의 최소화, 그리고 효율적인 애니메이션 속성 사용 등을 포함합니다 [1-3]. 이를 통해 사용자 경험을 개선하고, 궁극적으로 코어 웹 바이탈(Core Web Vitals) 및 SEO 순위를 높이는 데 기여할 수 있습니다 [4].
+## 📌[[ brief]] 코Summary
+성능 최적화([[Performance Optimization]])는 브라우저가 CSS를 처리하는 방식을 이해하고, 렌더링을 지연시키거나 불필요한 연산을 유발하는 요소를 최소화하여 웹 페이지의 로딩 속도와 반응성을 향상시키는 과정입니다 [1]. 주로 렌더링 블로킹(Render-[[Blocking]]) CSS 파일의 분할, 리플로우(Reflow)와 리페인트(Repaint)의 최소화, 그리고 효율적인 애니메이션 속성 사용 등을 포함합니다 [1-3]. 이를 통해 사용자 경험을 개선하고, 궁극적으로 코어 웹 바이탈([[Core Web Vitals]]) 및 SEO 순위를 높이는 데 기여할 수 있습니다 [4].
 
 ## 📖 Core Content
 *   **렌더링 및 로딩 최적화**
@@ -13,7 +13,7 @@
 *   **리플로우(Reflow) 및 리페인트(Repaint) 관리**
     *   리플로우는 요소의 기하학적 구조(크기, 위치)가 변경될 때 발생하며, 해당 요소뿐만 아니라 자식, 상위 및 뒤따르는 요소들의 레이아웃까지 다시 계산하게 만들어 성능에 치명적입니다 [12, 13]. 리페인트는 레이아웃 변화 없이 배경색 등 시각적 요소만 바뀔 때 발생합니다 [3, 12].
     *   리플로우를 줄이기 위해서는 DOM 트리에서 가능한 가장 낮은 위치에 있는 노드의 클래스를 변경해 영향을 받는 범위를 최소화해야 합니다 [14].
-    *   JavaScript로 인라인 스타일을 여러 번 설정하는 대신 외부 클래스로 스타일을 조합하여 한 번만 변경되도록 처리해야 합니다 [15].
+    *   [[JavaScript]]로 인라인 스타일을 여러 번 설정하는 대신 외부 클래스로 스타일을 조합하여 한 번만 변경되도록 처리해야 합니다 [15].
     *   테이블 레이아웃은 콘텐츠에 따라 전체 레이아웃을 다시 계산하는 여러 번의 패스(pass)가 필요할 수 있으므로 레이아웃 목적으로는 피해야 합니다 [16, 17].
 
 *   **애니메이션 성능 최적화**
@@ -23,9 +23,9 @@
     *   애니메이션을 적용할 요소는 `position: fixed` 또는 `absolute`로 설정하여 문서 흐름에서 분리하면, 애니메이션 실행 시 전체 레이아웃의 리플로우 대신 리페인트만 발생시킬 수 있습니다 [15, 25].
     *   `will-change` 속성을 통해 변경될 요소를 브라우저에 미리 알려 최적화를 돕되, 남용하면 오히려 성능을 저하시킬 수 있으므로 최후의 수단으로 제한적으로 사용해야 합니다 [26, 27].
 
-*   **설계 구조(CSS Architecture)에 따른 성능 차이**
-    *   styled-components 및 Emotion과 같은 런타임 CSS-in-JS 도구는 런타임에 CSS 문자열을 파싱하고 생성하므로 CPU 사이클 소모와 JS 번들 크기 증가를 유발하여 렌더링 성능 오버헤드를 발생시킵니다 [28-31]. 
-    *   반면 CSS Modules, Tailwind CSS, 그리고 Vanilla Extract와 같은 Zero-runtime CSS-in-JS는 빌드 타임에 정적 CSS를 생성하므로 런타임 오버헤드가 없어 성능에 유리합니다 [32-34].
+*   **설계 구조([[CSS Architecture]])에 따른 성능 차이**
+    *   [[styled-components]] 및 Emotion과 같은 런타임 [[CSS-in-JS]] 도구는 런타임에 CSS 문자열을 파싱하고 생성하므로 CPU 사이클 소모와 JS 번들 크기 증가를 유발하여 렌더링 성능 오버헤드를 발생시킵니다 [28-31]. 
+    *   반면 [[CSS Modules]], [[Tailwind CSS]], 그리고 Vanilla Extract와 같은 [[Zero-Runtime CSS-in-JS]]는 빌드 타임에 정적 CSS를 생성하므로 런타임 오버헤드가 없어 성능에 유리합니다 [32-34].
 
 *   **CSS 컨테인먼트 (CSS Containment)**
     *   `contain` 및 `content-visibility` 속성을 활용하면 브라우저가 페이지의 특정 부분을 격리하여 해당 컨테이너 내부를 독립적으로 렌더링하도록 최적화할 수 있습니다 [35, 36]. 이를 통해 화면에 보이지 않는 요소의 렌더링을 지연시켜 초기 로드 성능을 높일 수 있습니다 [36].