Reflow 와 Repaint

Reflow 와 Repaint 란 무엇인가?

프론트 엔드 개발자라면 이 두가지의 차이점과 개념에 대한 질문 끊임없이 받는다. 항상 이러한 질문을 받으면 나도 모르게 당황하게 된다. 개념이 어렵다기보단 한번 공부하고 나면 금방 금방 까먹기 때문일 수도 있고, 실제 이러한 것에 대한 고민을 그렇게 많이 안해서 일수도 있다. 하지만 사실 UI 개발자라면 해당 성능에 대해서 당연히 고민을 해야 한다고 생각한다. 물론 이러한 이유가 전부는 아니겠지만 Vitual Dom 에 대한 개념이 나온 것도 결국에는 reflow 에 대한 성능 저하를 줄이기 위해서 일 거라고 생각한다.

그렇다면 reflow 와 repaint 의 개념을 무엇일까?

reflow 를 사전에 검색을 해본다면 컴퓨터 화면에서 텍스트가 차지하는 공간을 조정하는 것 이라고 되어 있다. 브라우저의 개발자 도구로 한 웹 사이트를 보면 HTML 태그가 하나의 DOM 으로서 고유의 영역을 가지고 있다. 이러한 DOM 을 다시 재배치 하는 과정이라고 생각하면 된다. 최근에는 화려면 인터렉션이 들어가 있는 웹 어플리케이션이 굉장히 많다. 아무래도 화려한 시각 요소가 사용자로 하여금 더 많은 집중을 얻을 수 있고, 또 그러한 하나 하나의 인터렉션이 웹 어플리케이션의 완성도를 높여주기 때문이 아닐까 싶다. 이러한 Reflow 에 대해 영향을 주는 css 프로퍼티 들로는 position, top, left, bottom, right, width, height, padding, margin, float, border 등 CSS 를 이용해서 레이아웃을 구성하는 프로퍼티들이 해당 된다.

그리고 이 reflow 에 대한 것과 항상 같이 나오는 repaint 를 사전에 검색하면 ~ 을 다시 칠하다, 다시 칠하기, 다시 칠한 것 라고 나온다. Reflow 가 DOM 의 공간을 재배치 하는 것 이라고 한다면 repaint 는 말 그대로 DOM 의 시각적인 요소를 업데이트 하는 것 이라고 생각하면 된다. Repaint 에 영향을 주는 css 프로퍼티로는 background-color, opacity, visibility, outline, color 등이 있다.

이 두가지를 대한 개념을 이해하고 개선 해야 하는 이유는 이 repaint 와 reflow 가 웹 어플리케이션의 성능을 떨어트리는 주된 원인이기 때문이다. 그렇다면 이러한 성능을 어떻게 확인할 수 있으며, 어떻게 개선할 수 있을까?