웹페이지가 브라우저에 랜더링되는 과정

브라우저의 렌더링 과정

Parsing - Style - Layout - Paint - Composite

 

 

1. 요청 / 응답

우리가 https://주소.com 을 검색하면 이 요청에 대해 브라우저는 응답을 받아오는 과정에서 index.html 뿐만 아니라 script 나 css 등 다른 리소스파일들을 받아오게 된다.

 

2. HTML 파싱, DOM 생성(Parsing)

또한 렌더링엔진에서 브라우저의 응답으로 받아온 HTML 파일을 해석하여 렉싱과정을 통해 토큰을 해당 속성과 규칙을 정의하는 노드 객체로 변환시킨 후 각 노드가 연관성을 가질 수 있도록 DOM(Document Object Model) Tree를 구성한다.

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

 

 

 

 

 

3. 렌더 트리 생성(Style)

HTML구조와 CSS구조는 서로 다르기 때문에 서로 합치는 작업이 필요.

사용자에게 화면을 보여주기 위한 단계로, 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성

(Render Tree는 실제로 화면에 그려질 Tree로, 렌더링을 목적으로 만드는 트리를 말한다)

 

4. Layout

정보들은 각 요소들에 대한 정보일 뿐, 전체 화면에서 어디에 위치할 것인지에 대해서는 아직 알지 못한다. 

그렇기 때문에 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산하여 반영한다.

 

5. Paint

화면에 HTML요소를 페인팅하는 단계. Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.

화면에 색상을 입히고, 어떤 요소를 보여주기 위해서는 이 픽셀에 대한 정보가 있어야 한다. 페인팅은 이러한 픽셀들을 채워나가는 과정이다

 

6. Composite

Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.