웹페이지가 사용자에게 보여지기 까지의 과정(렌더링 과정)

웹페이지가 사용자에게 보여지기까지 (브라우저 렌더링 과정)

웹페이지가 사용자에게 보여지기까지 (브라우저 렌더링 과정)

본 포스트는 위 글을 상당 부분 참고하여 정리한 내용입니다.

 

 

 

1. 브라우저는 html, css, js, 이미지, 폰트 등의 리소스를 서버에 요청하고 ,응답으로 받아온다.

화면에 무언가를 보여주기 위해서는, 우선 화면을 구성할 재료들을 받아오는 것부터 시작해야 한다.

 

그러한 준비물들은 ‘서버’가 가지고 있으며, 브라우저가 주소창에 URL을 입력하면, DNS를 통해 url이 IP 주소로 변환되고, 해당 IP 주소를 갖는 서버가 요청을 받게 된다.

 

요청을 받은 서버는 브라우저에게 html, css, js, 이미지, 폰트 등의 파일을 보내준다.

 

2. 브라우저 렌더링 엔진은 서버로부터 받아온 html, css를 파싱하여 DOM, CSSOM을 생성하고, 이들을 결합하여 렌더 트리를 생성한다.

브라우저의 파싱 과정

서버로부터 받아온 파일이 브라우저가 이해할 수 있게 변형되는 과정을 살펴보자.

1. 바이트(Bytes) : 서버가 브라우저에게 2진수 형태의 html 문서를 보내준다
2. 문자열(Characters) : 해당 문서는 메타 태그의 charset 속성에 지정된 방식에 따라 문자열로 인코딩 된다.
3. 토큰(Tokens) : 문자열 형태의 html 문서가 ‘토큰’(문법적 의미를 갖는 코드의 최소 단위) 단위로 분해된다.
4. 노드(Nodes) : 각 토큰을 객체로 변환하여 노드를 생성한다 (DOM을 구성하는 기본 요소)
5. DOM(Document Object Model) : html문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한다.

 

CSS 파싱

브라우저는 html 파일을 위에서 아래 순서로 파싱하다가, <link>나 <style> 태그를 만나면 파싱을 잠시 멈추고 리소스 파일을 서버로 요청한다.

 

이렇게 가져온 css 파일도 마찬가지로 파싱하는데, 이렇게 만든 트리는 CSSOM이라 한다.

 

렌더트리 생성

화면을 구성하기 위해서는 DOM과 CSSOM을 합치는 과정이 필요하다.

렌더트리

렌더 트리는 말그대로 ‘렌더링’(사용자에게 보여지는 화면을 그리는 과정)을 위한 트리이며, 보이지 않을 요소들은 이 트리에 포함되지 않는다.

 

예컨대 DOM에서의 meta 태그(정보전달 목적)나 CSSOM에서 display: none으로 설정된 노드들은 렌더트리에서는 제외된다.

 

3. Javascript 파싱

브라우저 렌더링 엔진은 html파일을 위에서부터 순서대로 파싱하며 DOM을 생성하다가, js 코드를 불러오는 <script> 태그를 만날 때도 파싱을 잠시 멈추고 src 속성에 적힌 파일을 서버에 요청해 받아온다.

 

이렇게 받아온 js 파일도 마찬가지로 파싱을 해야 하는데, 이 파싱은 브라우저 렌더링 엔진이 아닌 Javascript 엔진이 담당한다.

 

이때 만들어지는 트리를 AST(추상 구문 트리)라고 한다.

 

4. 생성된 렌더 트리를 기반으로 html 요소의 레이아웃(위치, 크기)를 계산한다

렌더 트리에는 요소들의 위치나 크기와 관련한 정보가 들어있다.

 

하지만 아직 전체 화면에서 정확히 어디에 위치할 것인지에 대한 구체적 정보는 알지 못한다.

 

각 노드들의 정확한 위치를 알기 위해 브라우저는 렌더트리를 위에서 아래로 내려가며 계산하고, 모든 값들은 절대적 단위인 px로 변환된다.

 

5. 화면에 html 요소를 페인팅한다.

페인팅

이제 계산까지 마쳤으니, 화면에 요소들을 실제로 보여줘야 한다.

 

화면에 보여주기 위해 화면에 구성된 픽셀들을 채워가는 과정을 페인팅이라 한다.