리플로우와 리페인트는 무엇이고, 둘 중 어느 것이 더 성능에 안 좋은 영향을 미칠까요?

[innerstella]

Reflow @layout

**def)** 생성된 DOM 노드의 레이아웃 수치 변경 시 영향을 받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정

실행 시점

• DOM 엘리먼트 추가, 제거, 변경
• CSS 스타일 추가, 제거, 변경
• CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃 변경
• CSS3 애니메이션과 트랜지션 ← 애니메이션의 모든 프레임에서 리플로우 발생
• offsetWidth와 offsetHeight의 사용
• 유저 행동

💡 `리플로우가 일어나는 대표적인 속성들`

• position
• width, height
• margin, padding, border, border-width
• font-size, font-weight, line-height, text-align, overflow

• 문서 내 노드들의 레이아웃, 포지션을 재계산 후 다시 뿌려주므로 Repaint보다도 더 심각한 성능 저하를 유발시키는 과정
  • 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링함
  • 단일 엘리먼트 하나를 변경해도, 하위 엘리먼트나 상위 엘리먼트 등에 영향을 미칠 수 있음

Repaint

• 가시성이 변경되는 순간. 엘리먼트의 스킨에 변화가 발생하지만, 레이아웃에는 영향을 미치지 않을 때 유발됨
  • opacity, background-color, visibility, outline
• reflow가 실행된 순간 뒤에 실행됨
  • reflow만 수행되면 실제 화면에 반영되지 않고, render tree를 다시 화면에 그려주는 과정이 필요함

💡 `리페인트가 일어나는 대표적인 속성들`

• background, color
• text-decoration
• border-style, border-radious