브라우저 렌더링 과정

우리가 평소 Google Chrome, Apple Safari, Naver Whale, Microsoft Edge 등 다양한 브라우저를 사용하여 여러 웹사이트들에 방문 및 정보 조회를 하게 된다. 이때 우리가 조회하게 되는 콘텐츠를 노트북 또는 스마트폰 안에서 보여줄 수 있는 기술이 바로 브라우저 렌더링이다.

 

그렇다면 이 브라우저가 HTML, CSS, JS 코드를 어떻게 우리가 조회할 수 있도록 만들어주는지 알아보도록 하자.

 

브라우저 렌더링?

브라우저 렌더링이란 웹 서버로부터 받은 HTML, CSS, JS 등의 코드를 해석하고 화면에 출력하는 과정이다.

 

브라우저는 웹 서버로부터 코드를 전달 받고, 전달 받은 코드를 마치 빈 캔버스에 물감과 펜 등으로 그림을 그리는 것처럼 웹 페이지를 시각적으로 표현하여 사용자에게 하나의 화면을 보여주는 역할을 합니다.

 

브라우저 렌더링 과정

 

브라우저 렌더링 과정은 다음과 같다.

1. 브라우저는 HTML, CSS, JS, 이미지 등 웹 페이지 구성에 필요한 모든 리소스를 웹 서버로부터 다운로드한다.
2. 다운로드된 HTML 코드를 기반으로 DOM(Document Object Model) 트리를 생성한다.
   이때 DOM 트리는 웹 페이지의 구조를 나타내는 트리 구조로, 각 요소는 태그와 속성으로 구성된다.
3. 그 후 다운로드된 CSS 코드를 기반으로 CSSOM(CSS Object Model) 트리를 생성한다.
   이 CSSOM 트리는 웹 페이지의 스타일 정보를 나타내는 트리 구조로, 각 요소는 선택자와 속성, 값으로 구성된다.
4. 그 다음으로 DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 생성한다. 이 렌더 트리는 실제 화면에 표현될 요소와 위치를 결정하는 트리 구조이다. DOM 트리의 최상단부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아 규칙을 적용하고, 렌더와 관련된 요소들을 렌더 트리에 포함시키는 것이다. 
5. 렌더 트리에서 각 노드의 위치와 크기를 계산한다.
6. 렌더 트리에 따라 실제 픽셀을 화면에 표현하여 레이어를 만든다.
7. 레이어를 합성하여 실제 화면으로 표현한다.

 

위 과정을 간단하게 아래와 같이 정리해볼 수 있다.

1. Parsing: 브라우저는 리소스를 다운로드 후 각각의 문서를 파싱하여 DOM 트리와 CSSOM 트리를 생성
2. Style: DOM 트리와 CSSOM 트리를 통해 렌더 트리 생성
3. Layout: 렌더 트리에서 각 노드의 위치와 크기 계산
4. Paint: 계산된 값 통해 각 노드 실제 픽셀로 변환하여 레이어 생성
5. Composite: 레이어 합성을 통해 실제 화면 구성

 

이제 기본적인 브라우저 렌더링 과정에 대한 틀이 잡혔다면, 디테일하게 각 과정들을 살펴볼 필요가 있다.

위 내용만으로는 확실하게 감이 안 잡힐 수 있기에 조금 더 디테일하게 알아보도록 하자.

---

Parsing(파싱): DOM 트리와 CSSOM 트리 생성

처음 리소스 다운로드를 통해 받아온 HTML 문서의 경우 텍스트로 구성되어 있는데, 이 문서를 브라우저가 이해할 수 있는 형태로 바꾸는 과정이 필요하다. 우리도 컴퓨터에서 알아볼 수 있는 언어를 우리가 바로 인식하기 어려운 것처럼, 브라우저도 브라우저가 이해하기 좋은 형태로 바꾸어줘야 하는 것이다.

 

그렇기에, HTML 문서 파싱을 통해 DOM 트리를 생성하게 되고, CSS 문서 또한 파싱을 통해서 CSSOM이라는 트리를 생성하게 된다.

 

만약 HTML 문서 파싱 중에 <link>, <style>과 같은 CSS 파일을 가져올 때 사용되는 태그를 만나면 HTML 문서 파싱을 잠시 중단 후, 리소스 파일을 서버로 요청하게 되고, CSS 파일도 파싱하게 된다. 파싱 과정을 통해 CSSOM을 생성하고 나면 HTML 문서로 돌아가 중단된 지점부터 다시 파싱을 시작하여 DOM을 마저 생성하게 된다.

 

Style(스타일): 렌더 트리 생성

파싱 과정에서 DOM과 CSSOM을 생성하였는데, 둘은 매우 유사하게 생겼지만 HTML의 경우는 구조를, CSS는 디자인을 담당하기에 이 둘을 결합하는 과정이 필요하다.

 

렌더 트리는 이름에서 알 수 있는 것처럼 렌더링을 목적으로 만드는 트리이다.

 

렌더링은 브라우저에서 시각적으로 나타내줘야 하는 부분들만 필요하기에, 시각적으로 나타내지 않아도 되는 부분을 제외하여 트리를 구성한다. 즉, meta 태그, display: none; 등의 속성을 가진 요소들은 렌더와 관계 없어, 포함 시키지 않는다.

 

Layout(레이아웃): 렌더 트리에서 각 노드의 위치와 크기 계산

레이아웃은 렌더트리 내 노드들의 위치와 크기를 계산하는 과정이다.

 

루트 노드부터 순회하여 노드가 정해진 크기와 위치에 정확히 표현될 수 있도록 캡처하는 과정인데, 이때 모든 상대적인 측정값인 %나 rem 등은 화면에서 절대적인 픽셀로 변환된다.

 

Paint(페인트):  레이어 생성

페인트는 구조가 잡힌 후, CSS 속성들이 적용되는 과정이다.

위의 레이아웃 단계에서 계산된 값을 통해 각 노드를 화면상의 실제 픽셀로 변환하는데, 하나의 레이어가 아닌 여러 개의 레이어로 관리된다.

 

transform과 같이 별도의 레어어를 만들게 유도하는 CSS 속성을 만나면 레이어는 분리된다.

 

Composite(합성): 레이어 합성을 통해 실제 화면 구성

페인트 단계에서 생성된 레이어들을 합치는 과정으로, 이 과정을 거쳐 우리가 보게되는 웹페이지가 생성되는 것이다.