🍈 [TIL] 웹페이지가 브라우저 랜더링 과정

웹페이지의 브라우저에 랜더링 되어지는 과정은 어떻게되는가?

브라우저의 랜더링 단계는 크게 5단계로 나타낼 수 있습니다.

Parsing -> Style -> Layout -> Paint -> Composite 입니다.

 

이걸 풀어서 설명하면

첫번째 Parsing 단계에서는 HTML파일과 CSS파일을 파싱해서 각각 Tree를 만듭니다.

두번째 Style 단계에서 두 Tree를 결합하여 Rendering Tree를 만듭니다.

세번째 Layout 단계에서는 이전의 단계에서 결헙하여 만든 Rendering Tree에서 각 노드의 위치와 크기를 계산합니다.

네번째 Paint 단계에서는 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만듭니다.

마지막으로 Composite단계에서 레이어를 합성하여 실제 화면에 나타냅니다.

---

 

이걸 더 풀어서 설명하자면 이렇습니다.

 

Parsing : 구문분석 → 실제로 행할수 있는가 분석하고 변환하는것을 의미

parsing 단계는 HTML파일을 해석하여 DOM Tree를 구성하는 단계입니다.

parsing 중 HTML에 CSS가 포함되어 있다면 CSSOM Tree 구성 작업도 함께 진행됩니다.

 

Style : parsing단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜

Render Tree를 구성합니다.

Render Tree는 실제로 화면에 그려질 Tree입니다.

예를들어 Render Tree를 구성할 때 visibilty: hidden 은 요소가 공간을 차지하고, 보이지는 않기 때문에 Render Tree에 포함이 되지만, display:none

의 경우는 Render Tree에서 제외됩니다.

 

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

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

 

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

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

 

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