bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

Browse Source
This commit is contained in:
yesung
2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend_Mastery/Reflow와 Repaint(리플로우와 리페인트).md
+2 -2
View File
@@ -22,8 +22,8 @@ Reflow(리플로우)는 브라우저가 페이지 요소의 레이아웃과 기
* **테이블 레이아웃 지양:** 테이블은 셀 크기 변경 시 전체 노드의 리플로우를 유발하고 렌더링에 여러 번의 패스(pass)가 필요하므로 레이아웃 목적으로 사용해서는 안 됩니다 [16].
## 🔗 Knowledge Connections
- **Related Topics:** [[CSS 성능 최적화(CSS Performance Optimization)]], [[애니메이션 최적화(Animation Optimization)]], [[렌더링 파이프라인(Rendering Pipeline)]], [[레이아웃 스래싱(Layout Thrashing)]]
- **Projects/Contexts:** [[실무에서의 CSS 상태 관리 및 애니메이션 설계]], [[대규모 프론트엔드 프로젝트의 UI 성능 개선]]
- **Related Topics:** [[CSS 성능 최적화(CSS Performance Optimization)]], 애니메이션 최적화(Animation Optimization), [[렌더링 파이프라인(Rendering Pipeline)]], [[레이아웃 스래싱(Layout Thrashing)]]
- **Projects/Contexts:** 실무에서의 CSS 상태 관리 및 애니메이션 설계, 대규모 프론트엔드 프로젝트의 UI 성능 개선
- **Contradictions/Notes:** `will-change` 속성은 브라우저에 요소의 변경을 미리 알림으로써 렌더링을 최적화할 수 있는 힌트를 주지만, 너무 많은 요소에 불필요하게 남용할 경우 오히려 자원을 소모하여 애니메이션 성능을 저하시킬 수 있으므로 기존 성능 문제가 있을 때 최후의 수단(last resort)으로만 사용해야 합니다 [9, 17, 18]. 또한 브라우저가 성능 향상을 위해 여러 리플로우를 묶어서 처리(dirty reflows)하는 과정에서 간혹 렌더링 버그(예: 그림자가 잔류하는 현상 등)가 발생할 수 있으며, 이 경우 강제로 리플로우를 유발하여 버그를 수정해야 하는 예외 상황도 존재합니다 [19, 20].
---