브라우저 렌더링 (Reflow & Repaint)

브라우저가 화면을 렌더링하는 순서 (Chrome기준)

DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함레이아웃은 각 객체의 정확한 위치 및 크기를 계산최종 렌더링 트리에서는 페인드가 수행되며 픽셀을 화면에 렌더링한다.
HTML 요소를 파싱해서 만들어진 DOM 트리와 CSS 요소를 파싱해서 만들어진 CSSOM 트리가 결합되어 렌더링 트리가 생성되면, 브라우저는 레이아웃 단계로 넘어가게 된다.

Layout (Reflow)

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

Paint (Repaint)

레이아웃 계산이 완료되어 뷰포트에 픽셀을 그리는 작업을 페인팅 또는 래스터화 라고 부른다.레이아웃 단계를 통해 파악한 렌더링 트리의 각 노드를 화면에서 실제 픽셀로 변환해 화면에 그리는 단계이다. (border-radius, shadow-box 등과 같은 속성이 변경되었을 때 실행한다.)Repaint 역시 최초 한번만 실행되고 끝나지 않고 Reflow가 발생했을 때는 반드시 화면을 다시 그려야 하기 때문에 실행되고, Reflow가 일어나지 않더라도 상술한 속성이 변경되면 역시 화면을 그려야 하기 때문에 실행된다.

**Reflow****와 **Repaint

브라우저에서는 사용자의 동작에 따라 뷰포트에 나타나는 화면이 변화하도록 스크립트를 작성하는 경우가 많다. mouse over, click 등의 동작으로 인해 화면에 나타나는 부분이 변화가 생기면 어떤 변화인지에 따라 Reflow와 Repaint가 발생하거나 또는 Repaint가 발생한다.화면을 새롭게 그려야 하기 때문에 Reflow, Repaint가 발생하는 것 자체를 문제 삼을 수는 없으나 이 단계가 너무 반복되면 페이지의 성능을 저하시키는 요인이 된다.때문에 성능을 개선하기 위해 Reflow와 Repaint 횟수를 줄이는 방법이 고려될 수 있다.Reflow와 Repaint 횟수를 줄이기 위해 화면의 변화를 줄이는 것도 방법이 될 수는 있겠지만 적절한 익터렉션이 필요한 경우라면 정적인 화면을 만드는 것이 반드시 좋은 방법은 아니다.