렌더링이란?

HTML, CSS, Javascript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정을 말합니다.

렌더링 엔진

각 브라우저마다 렌더링을 하는 각자의 렌더링 엔진을 가지고 있습니다.

• 크롬 : 웹킷(Fork) => 블링크 (Blink)
  Fork : 소스코드를 가져와 독립적인 새로운 소프트웨어를 개발하는 것.

• 사파리 : 웹킷(Webkit)

• 파이어폭스 : 게코엔진 (Gecko)

렌더링 과정

1. HTML, CSS를 파싱 및 다운로드

2. 다운받은 HTML, CSS => OBJECT MODEL로 만듦.

HTML => DOM (DOM OBJECT MODEL)
CSS => CSSOM (CSS OBJECT MODEL)

DOM 과 CSSOM => RENDER TREE 생성

• Render Tree에는 실제 화면에 표현되는 노드(요소)들로만 구성됩니다.

ex) display : none; 속성이 설정된 노드는 어떤 공간도 차지하지 않아 Render Tree를 만드는 과정에서 제외.
visibility : invisible 속성은 비슷하게 동작하지만, 공간은 차지하고 요소가 보이지 않게만 하기 때문에 Render Tree에 포함됨.

3. Layout

레이아웃 단계는 *뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산합니다.
즉, 브라우저 화면의 어떤 위치에 어떤 크기로 출력될지 계산하는 단계라고 할 수 있습니다.

4. PAINT

Layout 계산이 완료되면 요소들을 실제 화면에 그리게 됩니다.

렌더링 최적화

렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려진다고 해서 렌더링 과정이 모두 끝난 것이 아닙니다. 특정 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등의 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow) 과정을 다시 수행하게 된다.
이렇게 되면 렌더 트리와 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow, 그리고 Reflow된 렌더 트리를 다시 화면에 그려주는 과정을 Repaint라고 한다.

Reflow

위에서 말한 것처럼 렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정을 Reflow라고 한다.

Reflow가 일어나는 대표적인 경우는 다음과 같다.

• 페이지 초기 렌더링 시 (최초 Layout 과정)
• 브라우저 리사이징 시 (Viewport 크기 변경)
• 노드 추가 또는 제거
• 요소의 위치, 크기 변경
• 폰트 변경과 이미지 크기 변경

Repaint

Reflow만 수행되면 실제 화면에는 반영되지 않기 때문에 다시 painting이 일어나야 한다. 이 과정을 Repaint라고 한다.
무조건 Reflow가 발생해야 Repaint가 수행되는 것은 아니다.
background-color, opacity와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow를 수행할 필요가 없기 때문에 Repaint만 수행하게 된다.

렌더링 최적화 방법

reflow 최소화하기

브라우저가 렌더링을 더 빠르고 효율적으로 할 수있게 개발하기 위해서는 Reflow 과정을 최소화 시키는 것이 좋다. Reflow가 발생하면 필연적으로 Repaint가 일어나기 때문에 렌더링 최적화에 좋지 않은 영향을 준다. 그러므로 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는 것이 좋다.

Reflow가 일어나는 대표적인 속성

position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align, white-space ...

Repaint가 일어나는 대표적인 속성

background, background-image, background-position, background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, outline-color, outline-width, text-decoration, visibility...

영향을 주는 노드 최소화하기

Javascript와 CSS를 조합해 애니메이션이나 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용하면 영향을 받는 주변 노드들을 줄일 수 있다.
fixed와 같이 영향을 받는 노드가 전혀 없는 경우 Reflow 과정이 전혀 필요없어지기 때문에 Repaint 연산비용만 들게 되어 효율적이다.