reflow와 repaint

브라우저가 화면을 렌더링하는 순서를 단계별로 요약하면 아래와 같다. (chrome 기준)

• DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성한다.

• 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다.

• 레이아웃은 각 객체의 정확한 위치 및 크기를 계산한다.

• 최종 렌더링 트리에서는 페인트가 수행되며 픽셀을 화면에 렌더링한다.

HTML 요소를 파싱해서 만들어진 DOM 트리와 CSS 요소를 파싱해서 만들어진 CSSOM 트리가 결합되어 렌더링 트리가 생성되면, 브라우저는 레이아웃 단계로 넘어가게 된다.

레이아웃(reflow)

레이아웃 단계는 트리를 생성하면서 계산된 노드와 스타일을 기기의 뷰포트에서 어떤 위치에서 어떻게 보이도록 하는지 결정하는 단계이다. 이것을 레이아웃 단계라고 부르고 reflow라고도 한다.

레이아웃 프로세스는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 캡쳐하는 '상자 모델'이 출력되며 상대적인 측정값도 모두 절대적인 픽셀로 변환된다. 레이아웃 과정 즉, 리플로우는 최초 한 번만 실행되고 끝나는 것이 아니라 width, height, left, top, offsetHeight, offsetWidth, scrollTop 등 수치를 계산해 새로운 위치에 나타나게 하는 동작이 일어날 때마다 반복해서 실행된다.

paint(repaint)

레이아웃 계산이 완료되어 뷰포트에 픽셀을 그리는 작업을 페인팅 또는 래스터화 라고 부른다. 레이아웃 단계를 통해 파악한 렌더링 트리의 각 노드를 화면에 실제 픽셀로 변환해 화면에 그리는 단계이다. border-radius, shadow-box 등과 같은 속성이 변경되었을 때 실행된다.

리페인트 역시 최초 한 번만 실행되고 끝나지 않고 리플로우가 발생했을 때는 반드시 화면을 다시 그려야 하기 때문에 실행되고, 리플로우가 일어나지 않더라도 상술한 속성이 변경되면 역시 화면을 다시 그려야 하기 때문에 실행된다.

reflow와 repaint

브라우저에서는 사용자의 동작에 따라 뷰포트에 나타나는 화면이 변화하도록 스크립트를 작성하는 경우가 많다. 마우스 오버, 클릭 등의 동작으로 인해 화면에 나타나는 부분에 변화가 생기면 어떤 변화인지에 따라 reflow와 repaint가 발생하거나 또는 repaint가 발생한다.

화면을 새롭게 그려야 하기 때문에 reflow, repaint가 발생하는 것 자체를 문제 삼을 수는 없으나 이 단계가 너무 자주 반복되면 페이지의 성능을 저하시키는 요인이 된다. 때문에 성능을 개선하기 위해 reflow와 repaint 횟수를 줄이는 방법이 고려될 수 있다.

reflow와 repaint 횟수를 줄이기 위해 화면의 변화를 줄이는 것도 방법이 될 수는 있겠지만 적절한 인터렉션이 필요한 경우라면 정적인 화면을 만드는 것이 반드시 좋은 방법은 아니다.