이 카테고리는 비전공자로서 개발자로써 공부하며, 평소 이해하지 못한 단어를 제방식대로 정리하는 카테고리입니다.
제방식대로 풀어 쓴것이므로 오류가 있을 수 있습니다.
오류가 있을시 댓글로 남겨주시면 참고하도록 하겠습니다.

---

Reflow와 Repaint

지금 이후 편하게 한국어로 리플로우 & 리페인트 로 표현하도록 하겠습니다.

리플로우와 리페인트 웹을 만드는 개발자로써 많이 들어본 내용일 것이다.
이름만 들어로 리(Re)로 시작하는 하는 것이 뭔가 다시한다는 것 같다.
위키를 살펴보니 Re- 로 시작하는 단어들은 다시 또는 반복, 되돌리다의 뜻을 더한 접두사로 정리되어 있다.
리핏(repeat), 리턴(return), 리액션(reaction)등 우리가 아는 모든 단어가 위키에서 정리한대로 반복 또는 다시등의 뜻을 갖고 있다.
이중 우리가 리플로우(reflow) & 리페인트(repaint)에 관심을 갖어야 하는 이유는 우리는 웹개발자이기 때문이다.
먼저 플로우와 페인트는 우리가 만든 웹문서를 브라우저에서 렌더링할때 발생한다.
렌더링 과정은 이전에 1편과 2편으로 나누어서 포스팅했었다.(모르시는 분들을 위해 친절히 링크를 걸어두었습니다.)

그때의 보았던 그림을 통해 살펴보자

그림은 친히 한글로 써있다. 렌더트리가 보이는가?
렌더트리의 위쪽 그리고 오른쪽에 각각 배치와 그리기가 있다.
저것이 바로 플로우와 페인트이다.
이제 리플로우와 리페인트에 대해 알아보자.

Reflow

리플로우는 플로우가 다시 반복된다는 뜻이다. 위에서 살펴본 그림으로 보면 배치 === 플로우이다.
배치라고 해서 위치를 뜻하는 것은 아니다.
플로우 과정은 돔트리를 구성한 후에 스타일을 합쳐 렌더트리의 과정에서 크기, 위치등을 담당한다.
각각 문서의 위에서 아래로 그리고 왼쪽에서 오른쪽으로 문서를 읽어가면서 필요한 부분에 대해 서버와 통신을 한후에 DOM트리 + 스타일을 합치고,
이를 표현하기위한 렌더트리를 구성하는 과정에서 display 그리고 width, height, position 등을 계산하는 과정이다.

리플로우는 이과정을 다시 거치는 것을 말한다.
Javascript를 통해 어떠한 이벤트가 발생하였을 경우,
예를 들면 팝업노출 또는 슬라이드조작등 Javascript를 통한 UI를 변경 또는 이동하는 과정에서 리플로우가 발생한다.

Repaint

리페인트 역시 페인트가 다시 일어나는 과정이다. 위그림에서는 그리기 === 페인트이다.
페인트는 다시 그린다는 뜻이다.
위에 렌더트리과정에서 플로우를 통해 계산한 것을 그리는 과정이 바로 페인트이다.
그리는 것은 실제 웹에 보여주는 것을 말한다. 계산된것을 웹브라우저에 ‘표현한다’는 것이 더 좋은 것 같다.
색깔, 보더, 형태 등등을 우리가 보는 뷰의 형태로 표현하는것이다.

즉 리페인트는 리플로우로 인해 계산된 것을 다시 그리는 것이다.

우리가 Reflow 와 Repaint에 관심을 갖어야 하는 이유

우리 웹개발자의 역량은 과거에는 단순 보여주는 것을 중심으로 두었었다.
반면 현대에 들어서 웹개발자의 역량은 성능 최적화된 웹페이지를 만드는 것에 중점을 두고있다.
물론 자사서비스가 아니고, 타사의 웹서비스를 만드는 곳은 속도라는 예외가 있긴하다.

하지만 자사의 서비스를 만드는 회사는 성능 최적화에 우선을 둬야한다.
예를 들어 쇼핑몰을 렌더링하는데 5초의 시간이 걸린다고 해보자.
같은 제품을 여러회사들이 나눠팔고 가격은 같다.
여러분들이라면 어느곳을 택하겠는가? 당연히 소비자에게 불편함 없이 빨리 보여지는 페이지에 초점을 둔다.
심지어 렌더링 과정에서 Javascript로 인한 기능이 보여지기 이전에 눈속임으로 뷰단을 이미지로 보여주는 회사도 보았었다.
이처럼 성능 최적화에 중점을 둬야한다.

그렇기 위해서는 빠른 렌더링을 위해 여러 방법이 있지만, 리플로우와 리페인트를 최대한 줄이는 것이 성능 최적화의 좋은 방법이다.
그래서 우리 웹개발자는 리플로우와 리페인트를 줄이는 방법에 대해 공부해야만한다