Reflow(리플로우), Repaint(리페인트)

자바스크립트 최적화

웹 개발을 하게 되면, 웹페이지의 성능 문제를 만나게 됩니다... 거기서 대부분의 문제는 리플로우와 리페인트가 발생(돔을 건드리면.. 아주 큰일..나는 거야..) 하며, 시간을 잡아먹습니다...

(특히, 자사 웹페이지 또는 솔루션을 개발하다 보면 이와 같은 이슈를 더 많이 만나게 됩니다... 슬픔..)

하지만, 이런 리플로우나 리페인트가 발생하는 것은 어쩔 수 없는 것입니다. 하지만, 이러한 현상을 얼마나 최소하면서 최적화 시킬 수 있는지가 성능을 개선할 수 있는 요지입니다..

브라우저 렌더링

Dom, Cssom 생성 => RenderTree 생성 => 레이아웃 => 페인트

브라우저 렌더링은 HTML, CSS 문서를 파싱 후, DOM Tree와 CSSOM Tree를 생성 이후에, 이 둘을 이용하여 Render Tree 를 생성하고 레이아웃과 페인트 단계를 걸쳐 완료됩니다.

Render Tree 에는 스타일 정보가 있고 실제 화면에 표현될 노드들로만 구성되어 있습니다.
예를 들어, Dom 트리는 html => body, head => p => "Hello, World!",

Cssom 트리에는 p.style.color: "#fff" 가 있어 Render 트리에는 이제 <p style...> Hello, World</> 와 같은 구조가 생성됩니다. (display:none 사용 시에는 Render 트리에 포함되지 않음.)

레이아웃 단계에서는 RenderTree 노드들이 가지고 있는 스타일에 따라 정확한 위치와 크기를 계산함..

페인트 단계에서는 이제 레이아웃 단계에서 완료된 사항을 실제 화면에 그려 넣습니다. (복잡해질수록 느려짐...)

Reflow(리플로우)

리플로우가 발생하는 경우는 생각보다 많습니다..

렌더링 후에 요소의 스타일을 변경한다거나, 레이아웃을 수정하게 되면 해당 수정된 내용을 브라우저에서 수정된 내용을 다시 계산 후, 렌더링을 재시작하게 됩니다. (뭐 하나 할 때마다 리플로우가 발생한다면.. 매우 느려짐..ㅠㅠ)

그러므로, 리플로우 동작에 유의하여 개발하는 것이 성능을 향상할 수 있는 방식입니다.

Repaint(리페인트)

리플로우 자체로만은 실제 화면에 그려지지 않습니다.

계산된 내용을 가지고 다시 페인트 단계가 발생하는 것을 리페인트라고 합니다.
리플로우가 일어났다고 무조건 리페인트가 일어나는 경우는 아닙니다.

(영향을 주지 않는 몇 가지 스타일 속성들이 있음..)

경험

보통 자사 솔루션을 개발하면 성능의 관련된 이슈를 종종 볼 수 있는데, Performance 를 체크해보면, 화면의 돔을 조작하여 다시 그리는 경우에 속도를 많이 잡아먹는 것을 볼 수 있을 것입니다.
(forced reflow is a likely performance bottleneck 이런 것도 보일 거임...)
실제로 회사에서 개발한 제품 중에 데이터를 화면단에 뿌려서 조작하는 행위를 하는 기능이 있는데, 리플로우와 리페인트 문제로 인해, 속도가 꽤 잡아먹은 경험이 있습니다.
위와 같은 사항을 고려(리플로우가 발생하면, 시간이 동기식이기 때문에 병목 현상이 발생할 수 있음..)하여,
맨 마지막에 한 번만 그릴 수 있도록 수정하여, 5초 정도 걸리던 기능을 0.8초 정도로 성능을 개선한 경험이 있습니다. 

이렇게 돔 동작을 최소화하여 브라우저를 최적화시키면 놀라울 정도로 성능이 개선되는 것을 볼 수 있습니다.