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

1. HTML, CSS, JS, 이미지, 폰트 등의 리소스를 서버에 요청하고, 응답으로 받아온다.

주소창에 URL 을 입력하게 되면 URL의 호스트 이름이 DNS를 통해 진짜 주소인 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 보내게 됩니다. 서버는 기본적으로 index.html의 응답을 주도록 설정되어 있습니다.

2. HTML 파싱과 DOM 생성, CSS 파싱과 CSSOM 생성

받아온 HTML 문서는 텍스트로만 이루어져 있기 때문에 브라우저가 이해할 수 있는 형태, 즉 DOM 구조로 파싱을 하게 됩니다. html 파일을 파싱하다 <link>, <style> 태그를 만나면 파싱을 멈추고 리소스 파일을 서버로 요청합니다. 가져온 CSS 파일도 html과 마찬가지로 파싱을 하게 됩니다.

3. 렌더 트리 생성

DOM과 CSSOM은 비슷하게 생겼지만 서로 다른 속성들을 가진 독립적인 트리입니다. 따라서 이 둘을 합치는 작업이 필요합니다.

렌터 트리는 렌더링을 목적으로 만드는 트리입니다. 브라우저가 이제 진짜로 사용자에게 보여주기 위한 화면을 그리는 과정이기 때문에 보이지 않을 요소들은 이 트리에 포함되지 않습니다.

4. Javascript 파싱

html 파일을 한 줄씩 파싱하며 DOM을 생성하다가 <link>, <style> 태그와 같이 <script> 태그를 만나면 파싱을 멈추고 src 속성에 적혀있는 파일을 서버에 요청해 받아옵니다. 이때 받아온 js 파일은 Javascript 엔진이 파싱을 하게 됩니다.

5. 레이아웃(Reflow)

레이아웃은 요소의 가하학적인 속성들을 찾는 과정입니다. 아까 만들었던 렌더트리가 여기서 사용되는데, 렌더 트리에는 요소들의 위치나 크기와 관련된 정보들이 들어있었다. 하지만 이 정보들은 각 요소들에 대한 정보일 뿐, 전체 화면에 정확하게 어디에 위치할지 알지 못한다. 따라서 전체 화면에 어디에 위치하게 되는지 계산하는 것을 레이아웃 단계에서 일어납니다. 각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할 지 파악하기 위해 렌더트리에 맨 윗부분부터 아래로 내려가면 계산을 진행하며, 절대적인 단위인 px값으로 변환됩니다.

6. 페인팅

각각 정보를 가진 픽셀들이 모여 하나의 이미지 화면을 구성하는 것으로 화면에 색상을 입히고, 어떤 요소를 보여주기 위해서 이 픽셀에 대한 정보가 있어야 합니다. 페인팅은 이러한 픽셀들을 채워나가는 과정입니다.

관련 단어

파싱 : 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계입니다. 파열의 문자열들을 문법적 의미를 갖는 최소 단위인 ‘토큰’으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트리라고 한다.

Reflow : 레이아웃 계산을 다시 하는 것, width, height, position등의 위치나 크기가 변경된다면 Critical Render Path에서 요소의 위치나 크기를 결정하는 과정인 Layout 과정을 거치면 안 되는데, 즉 위치나 크기가 변경하게 된다면 전 과정을 모두 거쳐야 하는 것입니다.

Repaint : 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것