Reflow Repaint

 

출처 - Webkit

 

리플로우와 리페인트? 웹개발을 하며 자연스럽게 접하게 되는 개념 중 하나일 것이라 생각합니다.
웹의 렌더링에 대한 개념이기에 웹개발자로써 기본적으로 알고 있어야 되지만 시간이 지나면 자연스럽게 이러한 이론은.. 흐려지게 되죠?
그래서 한번 정리해 두고자 합니다.
리?플로우 리?페인트란 웹 브라우저의 렌더링이 될 때 위의 그림과 같은 과정을 거치는데, 렌더트리에서 배치와 그리기 과정을 거치는 부분을 의미합니다.

리플로우
배치과정이 다시 반복된다라고 보면 됩니다.
배치는 렌더트리를 구성하는 과정에서 크기, 위치등을 담당하고 display 그리고 width, height, position 등을 계산을 하게 되는데 이 부분을 재배치를 하게 되는것을 리플로우라고 합니다.
예를들어 자바스크립트의 바인딩을 이용해 동적으로 요소를 추가하거나 배치에 해당하는 요소를 변경하게 되면 이때에 렌더트리에서 재배치과정이 일어납니다.
이러한 과정을 리플로우라고 합니다.

리페인트
그리기과정이 다시 반복된다라고 보면 됩니다.
그리기는 렌더트리를 구성하는 과정에서 색깔, 보더, 형태 등을 담당하고 color, background, border 등을 스타일링을 하게 되는데 이 부분을 다시 그리는 과정을 리페인트라고 합니다.
예를들어 자바스크립트의 바인딩을 이용해 on/off시 색상을 변경하거나 background를 변경한다거나 box-shadow의 값을 변경하게 되면 이를 변경하기위해 리페인트 과정이 일어납니다.
이러한 과정을 리페인트라고 합니다.

알아야 하는 이유
리플로우와 리페인트에 대한 이해를 해야 하는 이유는 자바스크립트를 통한 동적 바인딩을 이용한 프로그래밍을 많이 하기 때문에 인터렉션이 많이 일어나는 복잡한 사이트의 경우 해당 개념을 가지고 웹에 대한 최적화를 하게 됩니다. 웹브라우저들의 성능이 뛰어나기 때문에 왠만한 경우가 아니면 크게 필요성을 모를 수 있지만 앞서 말했듯 복잡한 인터렉션이 많은 사이트를 개발하게 된다면 이런 사소한 개념으로 최적화를 통한 좀 더 부드러운 퍼포먼스를 낼 수 있습니다.

• 리플로우 리페인팅이 자주 일어나는 경우 돔트리의 분리(position을 이용한 분리나 돔 구현자체에서 상위요소로의 배치 등)

• 요소 변경시에 대한 고려(body.style.width = '10px'; body.style.height = '20px'; -> body.style.cssText = 'width: 10px; heigh: 20px;')이와 같은 방식으로 한번에 변경을 한다.

• 연산되는 단위는 너무 작은 단위보단 적절한 단위에 연산을 통한 프레임을 줄여주는게 좋다.

• 사용하지 않는 노드는 visibilty: invisible 보다 display: none을 사용하는게 좋다.

• Reflow와 Repaint 가 일어나는 속성 사용을 줄인다.

위와 같은 내용을 습관처럼 들여 놓으면 조금 더 건강한 개발 습관을 가질 수 있을 것 같네요.
더 자세한 내용을 보고 싶다면 아래의 링크를 통해 더 깊이 있게 정리 되어 있으니 참고하시면 될 것 같습니다.

참고사이트

• https://sculove.github.io/slides/improveBrowserRendering
• https://d2.naver.com/helloworld/59361