Reflow와 Repaint

브라우저가 렌더링을 완료하고 페이지가 그려진 이후에도 다시 Layout과정을 수행하는 경우가 있다. 보통 어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함해서 Layout 과정을 다시 수행하게 된다.

이런 경우 불가피한 상황이 아니라면 최소화 하는 것이 좋으며 최적화의 대상이기도 하다.

Reflow(Layout)

브라우저 렌더링이 끝난 이후에 html 요소의 크기나 위치등 레이아웃이 변경되면 그에 영향받는 모든 요소들은 Layout단계를 거친뒤에 Repaint 과정을 수행하게 된다. Layout단계는 노드의 위치나 크기를 계산하는 단계이다.

Render Tree 생성한뒤 브라우저 렌더링 과정을 다시 거치는 것이다.

Reflow가 일어나는 경우는 크게 5가지이다.

• 윈도우 리사이징
• 노드 추가 또는 제거
• 내용변화(ex) Input 입력)
• JS를 통한 DOM 변화
• 요소의 위치, 크기 변경

Repaint(Paint)

브라우저 렌더링 과정에서 Layout과정을 수행 한뒤에 Paint 과정을 거치는데 Paint과정을 다시 수행하는 것을 Repaint라고 생각하면 된다.

즉, Reflow가 일어나는건 Layout 과정을 다시하는 수행하는 것이고 계산된 노드에 위치와 크기를 Viewport에 그리는 것은 Paint 과정에서 하는데 이걸 다시하는 것이다.

 

하지만 Repaint는 꼭 Reflow(Layout)가 발생해야만 수행하는 것은 아니다.

단순하게 스타일이 background-color나 기타 스타일 속성이 변경되는 것은 Reflow과정을 거치지 않고 Repaint만 수행하게 된다.

해결 방안

이렇게 DOM의 노드 중 하나라도 수정하게 되면 전체 노드들이 다시 렌더링 작업을 하게되어 비효율성이 이만저만이 아니다.

이러한 고질적인 문제점을 해결하기 위해 고안된 Virtual DOM이 있다.

Virtual DOM은 생성한 DOM을 메모리에 저장해 두었다가 DOM의 변화가 일어나면 메모리에 저장되었던 DOM과 현재 변경할 DOM을 비교하여 변경된 부분만을 실제 DOM에 반영한다.

결과적으로 모든 노드들이 영향을 미치치 않으며 변경이 필요한 노드만 바뀌어서 다시 렌더링하는 비효율성에서 벗어날 수 있게되었다.

Virtual DOM에 대해 좀 더 자세히 알고싶다면 이 게시글을 참조