브라우저 렌더링 과정

순서

• 탐색
• 응답
• 구문 분석
• 렌더
• 상호작용

1. 탐색

1-1 DNS 조회

• 웹 페이지를 탐색하는 첫 단계는 해당 페이지의 자원이 어디에 위치하는지 찾는 것이다.
• www.example.com이라는 주소는 사람이 읽기 쉽게 만들어진 주소다. 이 주소를 컴퓨터가 찾기 편한 주소로 바꿔줘야한다.
  • 만약 https://example.com를 탐색한다면 HTML 페이지는 IP 주소가 93.184.216.34인 서버에 위치하고 있습니다.
• 만약 이 사이트를 한 번도 방문한 적이 없다면 DNS 조회가 필요합니다.
• 브라우저는 DNS 조회를 요청합니다. 이는 최종적으로 이름 서버에 의해서 처리되고, IP 주소로 응답합니다.
• 최초의 요청 이후에, IP는 일정 기간 동안 캐시됩니다.
  • 이후에 이름 서버에 다시 연락하는 대신 캐시에서 IP 주소를 검색하여 후속 요청 속도를 높입니다.

1-2 TCP 연결 및 TLS 핸드셰이크

• IP 주소를 획득한 후, 브라우저는 서버와의 TCP 연결을 설정한다.
• HTTPS의 경우, TLS 핸드쉐이크 과정을 통해 보안 연결을 설정한다.

2. 응답

2-1 HTTP 요청 및 응답

• 브라우저는 HTTP 요청을 서버에 보내고, 서버는 요청된 리소스를 포함한 HTTP 응답을 반환한다.
• 이 응답에는 HTML 문서, CSS 파일, JavaScript 파일, 이미지 등 다양한 리소스가 포함될 수 있다.

3. 구문 분석

구문 분석은 브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계입니다.

3-1 DOM 트리 구축

• 서버는 클라이언트에게 HTML 문서를 2진수(바이너리) 데이터 형대로 응답합니다.

• 2진수 데이터는 브라우저에 의해 지정된 문자 인코딩 방식(ex UTF-8)에 의해 문자열로 변환된다.

• 문자열로 인코딩된 문서를 토큰 단위로 분해한다.

  • 토큰화의 목적: HTML 문서를 분석 가능한 단위로 분해하여, 이후 단계에서 문서 구조를 이해하고 DOM 트리를 구축할 수 있도록 한다.

• 각 토큰을 객체로 변환하여 노드를 생성한다.

  • 토큰화된 HTML 요소들은 이제 브라우저가 내부에서 이해하고 조작할 수 있는 객체 형태로 변환된다.

• 생성된 각 DOM 노드는 HTML 문서 내의 요소들의 중첩 관계를 반영하여 트리 구조로 조직된다. 이 트리 구조를 DOM이라고 한다.

3-2 CSSOM 트리 구축

• 브라우저는 CSS에 있는 각각의 규칙을 읽고, 트리 노드를 만든다. CSS 선택기에 기반해서 부모 노드, 자식 노드, 형제 관계의 노드를 만들어진다.

• 브라우저는 전송받은 CSS 규칙을 작업 가능한 상태로 변환해야한다. 따라서 브라우저는 HTML을 객체로 바꾼 프로세스를 CSS에 대해서 다시 한 번 한다.

• CSSOM을 만드는 것은 매우 매우 빠르다. CSSOM을 만드는데 드는 시간은 일반적으로 한 번의 DNS 조회를 하는 시간보다 짧기 때문에 웹 성능 최적화의 관점에서 CSSOM는 성능 향상에 큰 기여를 할 수 있는 영역은 아니다.

4. 렌더

렌더링 과정은 스타일 적용, 레이아웃 계산, 페인팅, 합성의 네 가지 주요 단계로 이루어진다. CSSOM과 DOM 트리는 구문 분석 과정에서 생성되며, 이를 통해 렌더 트리가 구성된다. 렌더 트리는 화면에 보이는 요소들의 레이아웃을 계산하고, 이를 실제 화면에 그리기 위한 준비를 한다.

4-1 스타일 단계

• 렌더링 과정에서 세 번째 단계는 DOM과 CSSOM을 합쳐 렌더 트리를 만든다. 이 렌더 트리는 보이는 요소들만을 포함하며, 각 노드는 해당 요소의 계산된 스타일을 가지고 있다.
• head 요소나 display: none; 속성을 가진 요소는 화면에 표시되지 않기 때문에 렌더 트리에 포함되지 않는다.

4-2 레이아웃 단계

• 리플로우: 레이아웃 이후, 페이지의 일부나 전체에 변경이 생기면 리플로우가 발생한다. 리플로우는 노드의 크기나 위치가 변경될 때 다시 레이아웃을 계산하는 과정이다.
• 뷰포트 고려: 레이아웃 단계에서는 다양한 뷰포트 크기를 고려하여 각 요소의 크기와 위치를 계산한다. 이는 다양한 기기와 화면 크기에서 일관된 레이아웃을 유지하기 위해 중요하다.

4-3 페인트 단계

• 페인트 단계는 레이아웃 단계에서 계산된 도형 값을 실제 화면의 픽셀로 변환하는 과정이다.

• 페인팅 과정에서는 텍스트, 색상, 경계, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려진다.

4-4 합성 단계

• 합성은 각 레이어를 올바른 순서로 겹쳐서 최종 화면을 구성하는 과정이다.