컴포지팅

여러 레이어를 합쳐서 최종 화면을 만드는 단계입니다.

왜 레이어를 나눌까?

전체를 한 번에 그리면 → 일부 변경 시 전체 다시 그림
레이어로 나누면     → 변경된 레이어만 다시 그림

시각화

[레이어 1: 배경]
┌─────────────────┐
│ 파란 배경        │
└─────────────────┘

[레이어 2: 텍스트]
┌─────────────────┐
│     안녕하세요    │
└─────────────────┘

[레이어 3: 버튼 (애니메이션)]
┌─────────────────┐
│        [버튼]    │
└─────────────────┘

        ↓ 합성

[최종 화면]
┌─────────────────┐
│ 파란 배경        │
│     안녕하세요    │
│        [버튼]    │
└─────────────────┘

새 레이어가 생성되는 경우

transform: translateX(100px);  /* 레이어 분리 */
opacity: 0.5;                  /* 레이어 분리 */
will-change: transform;        /* 레이어 분리 */
position: fixed;               /* 레이어 분리 */

성능상 이점

// X Layout + Paint + Composite 전부 발생
element.style.left = '100px';

// O Composite만 발생 (GPU 처리)
element.style.transform = 'translateX(100px)';

전체 렌더링 과정

HTML ──▶ DOM
              ├──▶ 렌더 트리
CSS ───▶ CSSOM ─┘
                    ↓
               Layout (위치, 크기)
                    ↓
               Paint (색칠)
                    ↓
               Composite (레이어 합성)  ← 여기
                    ↓
               화면 출력