Browser-Rendnering

브라우저 렌더링 동작 과정
렌더링의 기본적인 동작 과정은 다음과 같다.

• HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
• 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
• Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
• 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
• 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

Parsing: 브라우저가 페이지를 렌더링 할 때 가장 먼저 받아온 HTML 파일을 해석한다.

Style: Parsing 에서 생성된 DOM Tree 와 CSSOM Tree를 매칭시켜 Render Tree를 구성한다.

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

Paint: Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면사응 ㅣ실제 픽셀로 변환한다.

Composite: Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.