리플로우(Reflow) vs 리페인트(Repaint)

리플로우(Reflow) #

• 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다.
  • 브라우저 렌더링 - 3. 레이아웃(Layout) 단계

리페인트(Repaint) #

• 레이아웃과 상관이 없는 스타일 속성(배경색, 글자색 등) 변경 시에 렌더 트리를 재생성하는 작업입니다.
  • 브라우저 렌더링 - 4. 페인트(Paint) 단계

transform과 opacity #

• 리플로우와 리페인트를 모두 일으키지 않는, 컴포지팅만 일으키는 속성으로는 transform 과 opacity 뿐이다.

References #

• Why moving elements with translate() is better than pos:abs top/left - Paul Irish
• 브라우저 리플로우 최소화  |  PageSpeed Insights  |  Google Developers
• Simplify paint complexity and reduce paint areas (web.dev)
• Stick to Compositor-Only Properties and Manage Layer Count (web.dev)