Reflow와 Repaint

개념 설명

요소의 속성 변경으로 인한 브라우저의 레이아웃 재계산(Reflow)과 화면 다시 그리기(Repaint) 과정.

핵심 포인트

• Reflow: 위치, 크기 변경 시 레이아웃 전체 재계산 (비용 높음)
• Repaint: 색상, 배경 등 시각적 속성만 변경 시 화면 재그리기
• Composite: GPU 레이어로 처리되는 transform, opacity 등 (가장 빠름)
• 비용 순서: Reflow > Repaint > Composite
• Layout Thrashing: 지속적인 Reflow로 인한 성능 저하

예시 코드

// Reflow를 일으키는 속성들
const element = document.querySelector('.box');