Browser Rendering브라우저 렌더링

HTML 파싱 → DOM 트리
CSS 파싱  → CSSOM 트리
                ↓
          Render Tree (표시되는 요소)
                ↓
           Layout (위치·크기 계산)
                ↓
           Paint (픽셀 그리기)
                ↓
           Composite (레이어 합성)

// 느린 방법: 리플로우 반복 트리거
for (let i = 0; i < 100; i++) {
    element.style.width = element.offsetWidth + 1 + 'px';
}

// 빠른 방법: DOM 읽기/쓰기 배치 처리
const width = element.offsetWidth;  // 읽기
for (let i = 0; i < 100; i++) {
    element.style.width = (width + i) + 'px';  // 쓰기만
}

// CSS transform은 Composite만 → 가장 빠름
element.style.transform = 'translateX(100px)';