docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[CSS Performance Optimization]]
|
||||
# [[CSS Performance Optimization|CSS Performance Optimization]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 성능 최적화는 브라우저의 렌더링 경로에서 병목 현상을 유발하는 렌더링 차단 요소를 줄이고, 연산 비용이 높은 리플로우(Reflow)와 리페인트(Repaint)를 최소화하여 웹페이지의 반응성과 로딩 속도를 향상시키는 과정입니다 [1-4]. "예쁘게" 만드는 것을 넘어 "유지보수 가능하게" CSS를 설계하려면 불필요한 스타일 제거, 애니메이션의 GPU 가속 활용은 물론, CSS Modules나 Tailwind CSS처럼 런타임 오버헤드가 적은 도구를 선택하여 번들 크기와 아키텍처 성능을 동시에 관리하는 실무적 접근이 필수적입니다 [5-8].
|
||||
@@ -25,8 +25,8 @@ CSS 성능 최적화는 브라우저의 렌더링 경로에서 병목 현상을
|
||||
* **CSS Modules** 역시 빌드 시에 고유 클래스명을 정적으로 생성하므로 캡슐화(스코핑)를 보장하면서도 런타임 오버헤드가 없어 성능 친화적인 아키텍처를 구현할 수 있습니다 [5, 8, 32].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSS 구조 설계 방식]], [[BEM]], [[CSS Modules]], [[Tailwind vs 일반 CSS 비교]], [[애니메이션 (transition / keyframes)]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법]], [[대규모 프론트엔드 프로젝트 아키텍처]]
|
||||
- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], [[BEM|BEM]], [[CSS Modules|CSS Modules]], [[Tailwind vs 일반 CSS 비교|Tailwind vs 일반 CSS 비교]], [[애니메이션 (transition - keyframes)|애니메이션 (transition / keyframes)]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]], [[대규모 프론트엔드 프로젝트 아키텍처|대규모 프론트엔드 프로젝트 아키텍처]]
|
||||
- **Contradictions/Notes:**
|
||||
- CSS-in-JS는 동적인 스타일링과 개발자 편의성을 제공하지만 성능(번들 크기 및 런타임 비용)에서는 CSS Modules나 Tailwind CSS에 비해 단점이 큽니다 [8, 27-29].
|
||||
- 모바일이나 저사양 기기에서 애니메이션을 구현할 때는 시각적인 '부드러움(Smoothness)'을 고집하기보다는 CPU 자원을 아끼기 위해 의도적으로 픽셀 이동 단위를 조정하여 '속도(Speed)'를 챙기는 형태의 타협도 성능 최적화 방법으로 제안됩니다 [33].
|
||||
|
||||
Reference in New Issue
Block a user