[20191216 TIL] Reflow와 Repaint

2019-12-16 TIL

Reflow와 Repaint 차이점

수정된 렌더 트리를 다시 렌더링하는 과정에서 발생하는 것으로 웹 애플리케이션의 성능을 떨어뜨리는 주된 요인이다. 극단적인 경우, CSS 효과로 인해 JavaScript의 실행 속도가 느려질 수 있다.

Reflow

• 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링한다.

  • 단일 엘리먼트 하나를 변경해도, 하위 엘리먼트나 상위 엘리먼트 등에 영향을 미칠 수 있다.

Reflow가 발생하는 경우

• 페이지 초기 렌더링 시(최초 Layout 과정)

• DOM 엘리먼트 추가, 제거 또는 변경

• CSS 스타일 추가, 제거 또는 변경

• CSS3 애니메이션과 트랜지션

• offsetWidth와 offsetHeight의 사용

• 유저 행동 (hover, 텍스트 입력, 창 크기 조정, 글꼴 크기 변경 등 유저 인터랙션)

Repaint

• 레이아웃에는 영향을 주지 않지만, 가시성에는 영향을 주는 엘리먼트가 변경되면 발생한다.

  • 예를 들면, opacity, background-color, visibility, outline 등의 스타일 변경 시에는 레이아웃 수치가 변경되지 않으므로 Reflow 과정이 생략된 Repaint 과정만 일어나게 됩니다.

• 오페라에 따르면, “브라우저가 DOM 트리에 있는 다른 모든 노드의 가시성을 확인해야 하므로 리페인트는 비용이 많이 든다”고 한다.