브라우저가 CSS 변경 시 어떤 렌더링 단계를 다시 실행하는지 이해하면 성능 최적화의 핵심을 파악할 수 있습니다.
CSS 속성 변경은 렌더링 파이프라인의 서로 다른 단계를 트리거합니다. width, margin 등 레이아웃 속성은 리플로우(Layout 재계산)를 발생시키고, color, background 등은 리페인트(Paint만 재실행)를 트리거합니다. transform, opacity는 GPU 컴포지트 단계에서만 처리되어 가장 효율적입니다.
CSS 속성을 선택하면 어떤 렌더링 단계가 실행되는지 확인할 수 있습니다.
실제 코드로 동작 원리를 확인하세요.
// ❌ 리플로우가 여러 번 발생
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';
// ✅ cssText로 한 번에 변경 (리플로우 1회)
element.style.cssText = `
width: 100px;
height: 200px;
margin: 10px;
`;
// ✅ 클래스로 일괄 변경 (리플로우 1회)
element.classList.add('new-layout');
// ✅ DocumentFragment 활용
const fragment = document.createDocumentFragment();
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
fragment.appendChild(li);
});
list.appendChild(fragment); // DOM 조작 1회width, height, margin, padding 등이 트리거합니다.color, background-color, box-shadow 등이 트리거합니다. 리플로우는 항상 리페인트를 수반하지만, 리페인트는 리플로우 없이 발생할 수 있습니다.DocumentFragment나 cssText로 일괄 처리 2. 강제 동기 레이아웃 방지 — 읽기/쓰기를 분리하고 requestAnimationFrame을 활용 3. 컴포지트 속성 사용 — transform과 opacity로 애니메이션 처리 4. will-change로 필요한 요소만 GPU 레이어로 승격 5. contain 속성으로 리플로우 범위를 제한top/left는 레이아웃 속성이므로 변경 시 리플로우 → 리페인트 → 컴포지트 전체 파이프라인을 실행합니다.transform은 컴포지터 레이어에서 처리되어 Layout과 Paint 단계를 완전히 건너뜁니다. GPU가 별도 레이어를 직접 이동/회전/확대하므로 메인 스레드를 차단하지 않아 60fps를 안정적으로 유지할 수 있습니다. opacity도 같은 원리로 최적화됩니다.offsetHeight 읽기 후 스타일 변경) 3. 합성 속성 사용 — transform, opacity로 애니메이션 4. 레이어 관리 — will-change, contain으로 격리 5. 가상 스크롤링 — 대량 리스트 렌더링 시 화면 밖 요소 제거 6. 디바운스/쓰로틀 — scroll, resize 이벤트 핸들링 최적화 7. requestAnimationFrame — 프레임 단위 작업 스케줄링will-change는 브라우저에 어떤 속성이 변경될 예정인지 힌트를 줍니다. 브라우저는 해당 요소를 별도 레이어로 승격시켜 GPU 가속을 준비합니다.will-change: transform 설정, 완료 후 제거.transform)을 사용 중이면 중복 불필요 4. 모바일 기기는 GPU 메모리가 제한적이므로 특히 주의