웹페이지의 랜더링 (23/03/27)

웹페이지의 랜더링

랜더링의 기본적인 동작 과정은 다음과 같다.

1. 서버로부터 필요한 데이터를 리소스 받는다.
2. HTML 과 CSS 파일을 파싱해서 각각 Tree를 만든다 (Parsing)
3. 두 Tree 를 결합 하여 Rendering Tree를 만든다. (Style)
4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.(Paint)
6. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

진행 과정 설명

Parsing
 브라우저가 페이지를 렌더링 하려면 가장 먼저 받아온 HTML 파일을 해석해야 한다. Parsing 단계는 HTML 파일을 해석하여 DOM Tree를 구성하는 단계이다. 파싱(Parsing = 구문분석) 중 HTML 파일에 CSS가 포함되어 있다면 CSSOM Tree 구성 작업도 함께 진행한다.

 

Style
  Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다. 예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.

Layout
Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

 

Paint
Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어난다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.

 

Composite
 Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.

 

Reflow,Repaint
 사용자가 웹페이지에 처음 접속을 하면, 랜더링 과정을 거쳐서 화면에 모든 요소가 그려지게 되는데, 이후에 사용자가 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 됩니다. 이런 변경을 통해 영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 됩니다. 이러한 과정을 리플로우(Reflow)라고 합니다.

리플로우는 단지 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고, 실제 이 결과를 화면에 그려지기 위해서는 다시 페인팅 단계를 수행해야 합니다. 이 과정을 리페인트(Repaint)라고 합니다.

기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우(Reflow)-리페인트(Repaint)가 일어나는 것은 아니고, 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행하게 됩니다. (리플로우가 일어나면 반드시 리페인트가 일어납니다)

• Reflow 의 예시
  position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
• Repaint 의 예시
  background, color, text-decoration, border-style, border-radius