쉽게 보는 렌더링 과정

렌더링이란 데이터를 눈에 보이는 형태로 변환하는 것을 뜻한다.

지금부터 내가 만든 웹페이지가 사용자의 눈에 보이기까지의 과정을 살펴보도록 하자!

🚨 저만의 언어로 설명하기 위해 생략과 재구조화가 이루어진 글임을 참고해주세요

START

주소창에 https://velog.io/@hain-tain/posts 를 입력하고 엔터를 누르거나, 헤인의 벨로그 바로가기를 클릭하면, 탐색이 시작된다.

1. 탐색

탐색이란 말 그대로, 해당 페이지를 보여주기 위해 필요한 자원들이 어디에 있는지 찾는 것이다. 만약 https://example.com를 탐색한다면 HTML 페이지는 IP 주소가 93.184.216.34인 서버에 위치하고 있다. 이처럼 내가 어떤 서버에 요청을 보내야 하는지 찾는 과정이 탐색 과정이다!

2. 요청을 위한 연결

이제 우리는 어떤 IP주소로 요청을 보내야 하는지 알아냈다! 그러나 바로 요청을 보낼 순 없다. 요청을 위한 연결 과정이 필요하다!!

2-1. TCP 핸드셰이크

두 컴퓨터 간 TCP 세션을 협상하고 시작하기 위해서 TCP가 3개의 메세지를 전달하는 과정을 말한다.

2-2. TLS 협상

HTTPS를 이용한 보안성있는 연결을 위해서 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인하고, 실제 데이터 전송 전에 안전한 연결이 이루어지도록 하는 과정이다.

이 모든 왕복이 끝나면 드디어 브라우저는 요청을 할 수 있다!!

3. 요청과 응답

연결이 성립되면, 브라우저는 초기 HTTP GET request를 보내 HTML 파일을 요청한다. 서버는 요청을 받으면 관련 응답 헤더와 함께 HTML을 응답으로 준다. 이외에 필요한 css, js 도 함께 응답으로 준다.

4. 파싱과 렌더

받은 HTML, css, js 파일을 분석하여 우리가 눈으로 볼 수 있는 웹페이지로 구성하는 단계이다. 이를 중요 렌더링 경로 (Critical Rendering Path)라고 부른다.

4-1. DOM 트리 생성

가장 먼저 HTML을 분석하여 DOM 트리를 만든다. DOM이란 Document Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model로 만드는 과정이다. HTML 태그와 1대 1 관계로 노드가 생성된다. 이때 트리는 다른 태그간의 관계와 계층을 반영한다. 예를 들어 다른 태그에 감싸져 있는 태그는 자식 노드입니다.

4-2. CSSOM 트리 생성

다음으로는 스타일 시트(css)를 분석하여 CSSOM 트리를 만든다.(이는 DOM처럼 트리구조를 가지지만 DOM과 별도의 문서이다.) 브라우저는 CSS에 있는 각각의 규칙을 읽고, 트리 노드를 만든다. 이때 CSS 선택기에 기반해서 부모 노드, 자식 노드, 형제 관계의 노드를 만들어진다.

4-3. Render 트리 생성
생성된 DOM과 CSSOM 트리를 합해 Render 트리를 만든다. 렌더 트리는 오직 보여지는 콘텐츠만 포함한다. 만약 요소에 display: none 이 적용되어 있다면, 해당 요소는 포함되지 않는다. 또한 일반적으로 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 렌더트리 안에 포함되지 않는다.

4-4. 레이아웃
레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정하는 단계이다.

4-5. 페인트
브라우저는 레이아웃 단계에서 계산된 각 박스를 실제 화면의 픽셀로 변환한다. 텍스트, 색깔, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함하여 모든 요소의 시각적인 부분을 실제 화면에 그리는 단계이다.

이러한 단계를 거쳐서 우리 눈에 이 사이트가 보이는 것이다!