feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup
This commit is contained in:
@@ -17,7 +17,7 @@ DOM(Document Object Model)은 브라우저가 수신한 HTML 문서 데이터를
|
||||
JavaScript를 사용해 DOM을 직접 조작하고 크기나 위치 등을 변경하면, 브라우저는 문서 전체의 레이아웃(Reflow)과 페인트(Repaint) 과정을 다시 실행해야 하므로 처리 비용이 매우 높습니다 [16-18]. 이를 최적화하기 위해서는 사용된 DOM 노드나 속성값을 캐싱하고, DOM의 읽기 및 쓰기 작업을 분리하여 레이아웃 스래싱(Layout thrashing)을 방지해야 합니다 [16, 19, 20]. React와 같은 프레임워크는 실제 DOM을 직접 수정하는 비효율성을 피하고자 메모리 내에 가벼운 사본인 가상 DOM(Virtual DOM)을 생성하여 조작을 추상화합니다 [17, 21, 22].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSSOM (CSS Object Model)]], [[Render Tree]], [[Virtual DOM]], [[Critical Rendering Path (CRP)]], [[Reflow (Layout)]], [[Repaint]]
|
||||
- **Related Topics:** CSSOM (CSS Object Model), [[Render Tree]], [[Virtual DOM]], [[Critical Rendering Path (CRP)]], Reflow (Layout), Repaint
|
||||
- **Projects/Contexts:** 프론트엔드 성능 최적화(DOM 접근 최소화 및 렌더링 파이프라인 관리), React의 렌더링 엔진 구조 및 재조정(Reconciliation) 과정 이해 [6, 17, 23, 24].
|
||||
- **Contradictions/Notes:** DOM 구축은 HTML을 파싱하면서 '점진적(incremental)'으로 이루어지지만, CSSOM 구축은 렌더링을 차단(render-blocking)하며 점진적으로 처리되지 않는다는 구조적 차이가 있습니다 [1, 7, 9].
|
||||
|
||||
|
||||
Reference in New Issue
Block a user