[Front-end] 웹 브라우저에서의 렌더링 과정

1. 브라우저란?

웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램

브라우저는 유저가 선택한 자원을 서버로부터 받아와 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들은 렌더링 과정을 통해 유저에게 보여준다.

---

2. 브라우저 렌더링 과정

1️⃣ Parsing단계 :: HTML 파일과 CSS 파일을 파싱하여 각각 Tree를 만든다.

- HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성

- 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행

 

2️⃣ Style단계 :: 두 Tree를 결합하여 Rendering Tree를 만든다.

- Parsing단계에서 생성된 DOM Tree와 CSSOM Trree를 매칭시켜 Render Tree에 구성

  (Render Tree는 실제로 화면에 그려질 Tree)

- Render Tree는 화면에 보여질 내용만 포함하기 때문에 display: none, meta tag와 같이 화면에 보이지 않는 것들은 포함되지 않는다.

 

💡 display: none과 visibility: hidden

  : display: none의 경우 화면에 보이지 않고, visibility: hidden의 경우 보이진 않지만 영역은 차지하고 있다.

    그래서 display: none은 Render Tree에 포함되지 않고, visibility: hidden은 Render Tree에 포함된다.

 

3️⃣ Layout단계 :: Rendering Tree에서 각 노드의 위치와 크기를 계산한다.

- Render Tree를 화면에 어떻게 배치해야 하는지 노드의 정확한 위치와 크기를 계산

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

  (만약 크기 단위를 %로 지정하였다면 %에서 픽셀로 변환)

 

4️⃣ Paint단계 :: 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다.

- Layout단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면 상의 실제 픽셀로 변환

  (픽셀로 변환된 결과는 하나의 레이어가 아닌 여러 개의 레이어로 관리)

 

5️⃣ Composite단계 :: 레이어를 합성하여 실제 화면에 나타낸다.

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