우리가 주소창에 url을 입력하고 엔터를 누르면 해당 url로 이동하게 된다.
이때 어떤 과정을 통해 페이지의 화면이 그려지게 되는지 간단히 정리해보려고 한다.
요약
- HTML을 파싱 하여 DOM Tree 생성
- CSS를 파싱 하여 CSSOM Tree 생성
- DOM Tree와 CSSOM Tree를 합쳐 Render Tree 생성
- Layout: Render Tree를 이용해 각 노드들의 위치와 형태 계산
- Paint: 노드들을 실제 화면에 그림
일단 주소창에 url을 입력하고 엔터를 누르면 브라우저는 해당 서버에 요청을 보낸다.
요청을 받은 서버는 응답으로 HTML 데이터를 보내준다.
HTML 데이터를 받은 브라우저는 화면을 그리기 위해 본격적으로 다음과 같은 단계를 거친다.
1. HTML 데이터를 파싱 하여 DOM Tree 생성
HTML 데이터는 아래 소스코드와 같은 형태로 구성되어 있다.
<html>
<head>
<meta charset='utf-8' />
<link href='./style.css' rel='stylesheet' />
</head>
<body>
<h1>페이지의 제목입니다.</h1>
<div>
<p>안녕하세요. 만나서 반갑습니다!</p>
<div>
<img src='./image.png' alt='환영인사이미지' />
</div>
</div>
</body>
</html>
이 데이터를 태그 하나하나 읽어나간다. (파싱 한다.)
이때 자바스크립트 파일을 만나면 해당 자바스크립트 파일을 받아와 실행할 때까지 파싱을 멈춘다.
또한 미디어 파일을 만났을 때에도 추가로 요청을 보내서 받아온다.
데이터를 파싱 하여 DOM Tree를 생성하는 과정은 위 이미지와 같다.
- HTML Bytes 데이터를 지정된 인코딩에 따라 문자열로 변환한다. (meta 태그에 작성되어 있는 정보, ex. utf-8)
- 바꾼 문자열을 읽어 Tokens로 변환한다. (StartTag, EndTag로 구성되어 있다.)
- 변환된 Tokens를 Nodes로 변환한다.
- Nodes를 이용하여 트리모양의 DOM이 생성된다. (그래서 DOM Tree이다.)
2. CSS 데이터를 파싱 하여 CSSOM Tree 생성
위 단계에서 HTML을 파싱 하다가 스타일 요소를 만나면 CSS 파일을 요청해 받는다.
CSS 파일도 동일하게 파싱 한 뒤 트리모양의 CSSOM이 생성된다.
CSS가 파싱 될 때에는 cascading 규칙으로 인해 자식 노드들이 부모 노드의 특성을 이어받고,
동일한 요소에 스타일이 중복으로 적용되어 있다면 나중에 작성된 스타일이 적용된다.
3. DOM Tree와 CSSOM Tree를 사용해 Render Tree 생성
DOM과 CSSOM이 모두 생성되었다면 이 둘을 합쳐 Render Tree가 생성된다.
Render Tree는 실제 화면에 보이는 요소들로만 이루어져 있다.
예를 들어, head 태그의 경우 화면에 보이지 않는다. 그러므로 Render Tree에는 haed 태그와 안에 내용들이 포함되지 않는다.
또한 CSS 속성 중 display가 none으로 설정된 노드들은 그 노드의 자식노드와 함께 포함되지 않는다.
4. Render Tree의 각 노드들이 어디에 어떻게 위치할지 계산 (Layout)
화면을 그리는 데 필요한 모든 정보가 담긴 Render Tree가 생성되면 이 정보들을 통해
각각의 노드들이 어디에 위치할 것인지 계산을 하게 된다. 이 단계를 Layout 또는 Reflow 단계라고 한다.
만약 반응형 웹 사이트를 만들었다고 한다면, 브라우저 창의 크기에 따라 요소들의 크기가 달라지게 된다.
이때 보이는 요소들은 변함없으니 Render Tree는 그대로 있고, Layout 단계만 다시 거쳐 요소들의 위치와 크기를 다시 계산하여 화면에 그려지게 된다.
5. 화면에 실제 픽셀을 그림(Paint)
모든 단계를 거쳤다면 마지막으로 화면에 노드들이 실제로 그려지게 된다.