Browser's Rendering process란 무엇인가?

용어별로 한번 살펴보도록 하자

1. browser

• 1. 크롬, 사파리, 파이어폭스, 등
• 2. 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른페이지로 이동할 수 있도록 하는 프로그램
• 3. 페이지 외에도 이미지, 비디오 등의 컨텐츠들을 렌더링 과정을 통해 보여준다

2. rendering

• HTML,CSS,JS 등 개발자가 작성한 문서를 브라우저가 출력하는 과정

3. browser rendering

• 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.

4. browser's rendering process

• 사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로 부터 HTML, CSS 등 웹사이트에 필요한 리소스를 다운받음

  순서를 보자

1. HTML파일과 CSS 파일을 분류해서 각각 Tree를 만든다. (Parsing)

2. 두 Tree를 결합하여 Rendering Tree를 만든다 (Style)

3. Rendering Tree에서 각 노드의 위치와 크기를 계산(Layout)

4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듬(Paint)

5. 레이어를 합성하여 실제 화면에 나타낸다.(Composite)

   Parsing

• 브라우저가 페이지를 렌더링하려면 가장먼저 받아온 HTML파일을 해석함

• HTML 파일을 해석하여 DOM Tree를 구성

• HTML에 CSS가 포함되어 있다면 CSSOM Tree 구성

  Style

• DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성

  Layout

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

• 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영

  Paint

• 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환

• 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러개의 레이어로 분리

• 페인팅 또는 래스터화 라고 함

  Composite

• Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냄

• 화면에서 웹페이지를 볼 수 있음

용어별로 여러 글 참고해서 작성해보았다.