리플로우와 리페인트를 줄이는 CSS 전략

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 웹 성능 최적화 엔지니어

핵심 요약

• 리플로우(Reflow)와 리페인트(Repaint)는 브라우저 렌더링 성능을 결정하는 핵심 요소로, GPU 가속 속성(transform, opacity) 사용을 통해 최소화해야 한다.
• 레이아웃 스레싱(layout thrashing)을 방지하기 위해 읽기 작업과 쓰기 작업을 분리하거나 requestAnimationFrame을 활용해야 한다.
• 테이블(table)은 내부 의존 관계로 인해 작은 변화에도 전체 리플로우가 발생하므로, flex/grid 사용을 권장한다.

섹션별 세부 요약

1. 리플로우와 리페인트의 정의

• 리플로우: 레이아웃 계산을 포함하는 복잡한 프로세스로, width, height, position 변경 시 발생.
• 리페인트: 시각적 변화를 유발하는 color, background-color 변경 시 발생.
• transform, opacity는 GPU 가속으로 성능 향상 가능.

1. 리플로우 유발 속성과 최적화 전략

• 리플로우 유발 속성: width, height, margin, padding, position, display, font-size, overflow 등.
• 상위 요소 변경 시 하위 요소 전체 리플로우 발생 → 특정 요소에만 스타일 적용 권장.
• position: fixed/absolute 사용 시 레이아웃 영향 최소화 가능.

1. 레이아웃 스레싱 방지 방법

• element.style 연속 조작 시 offsetHeight 등 레이아웃 정보 읽기로 인한 리플로우 발생.
• 읽기/쓰기 작업 분리 또는 모아서 처리하는 방식 권장.
• requestAnimationFrame 사용 시 프레임 타이밍에 맞춘 조작 가능.

1. 실무 적용 팁

• 애니메이션 요소에 transform 사용으로 GPU 가속 유도.
• table 사용 시 flex/grid로 대체하여 성능 개선.
• CSS-in-JS/런타임 스타일링 시 리플로우 최소화 전략 적용 필수.

결론

• *리플로우/리페인트 최소화를 위해 transform, opacity 사용, requestAnimationFrame 활용, 레이아웃 스레싱 방지**가 핵심이며, table 대신 flex/grid 사용을 통해 성능을 극대화해야 한다.