브라우저 구조와 렌더링 과정

브라우저의 구조

브라우저는 다음과 같은 구조로 되어있습니다.

• 사용자 인터페이스: 브라우저에서 사용자와 상호 작용하는 요소들이 포함됩니다. (주소 창, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼 등등)
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
• 렌더링 엔진: HTML, CSS 등의 문서를 파싱하고 화면에 표시합니다.
• 통신: HTTP 요청과 같은 네트워크 호출에 사용됩니다. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됩니다.
• 자바스크립트 해석기: 자바스크립트를 해석하고 실행합니다.
• UI 백엔드: select / input 등 기본적인 위젯을 표시합니다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용합니다.
• 자료 저장소: 자료를 저장하는 계층입니다. Web Stroage와 쿠키 등이 여기에 포함됩니다.

주소 창에 www.google.com을 입력했을 때

브라우저 주소창에 www.google.com을 검색하게 되면 구글의 검색 페이지가 화면에 보이는 것을 확인할 수 있습니다. 브라우저는 어떻게 구글이 서버에서 필요한 정보를 받아서 화면에 띄워주는지 확인해보겠습니다.

전체적인 그림은 다음과 같습니다.

브라우저의 주소 표시줄에 URL을 입력하면 어떻게 되나요?

브라우저의 네트워크 연결 과정

1. DNS (Domain Name System)에 IP 요청

브라우저는 주소 창 입력된 www.google.com을 IP로 변환해야 합니다. 그러기 위해서 브라우저는 DNS에 www.google.com의 IP주소를 요청합니다. 그리고 DNS는 해당 도메인으로 캐싱된 IP 주소가 있는지 확인합니다. 캐시는 브라우저, 운영 체제, 라우터, ISP (Internet Service Provider)에서 확인합니다. 만약 캐시에서 IP 주소를 찾지 못하면 DNS 쿼리를 통해서 도메인을 호스팅하고 있는 서버의 IP 주소를 찾습니다.

2. TCP(Transmission Control Protocol) 통신으로 서버와 연결

TCP 통신이란 컴퓨터 네트워크에서 신뢰성 있는 통신을 제공하는 인터넷 프로토콜입니다. TCP 통신은 3-way handshake을 통해서 클라이언트와 서버 간에 연결을 설정합니다.

3-way handshake의 연결 과정은 다음과 같습니다.

1. SYN (Synchronize)

   클라이언트가 서버에게 SYN 패킷을 보냅니다. 이때 SYN 패킷에는 클라이언트가 사용할 임시 포트 번호와 초기 순서 번호가 포함됩니다. 클라이언트는 SYN 패킷을 보내고, SYN_SENT 상태로 전환됩니다.

2. SYN-ACK(Synchronize-Acknowledgment)

   서버는 클라이언트의 연결 요청을 받고, SYN 패킷에 응답하기 위해 SYN-ACK 패킷을 보냅니다. 이때 SYN-ACK 패킷에는 서버가 사용할 임시 포트 번호와 클라이언트의 초기 순서 번호에 1을 더한 값이 포함됩니다. 서버는 SYN-ACK 패킷을 보내고, SYN_RECEIVED 상태로 전환됩니다.

3. ACK (Acknowledgment)

   클라이언트는 서버의 SYN-ACK 패킷을 받으면, 연결 수립을 확인하기 위해 ACK 패킷을 보냅니다. ACK 패킷에는 서버의 초기 순서 번호에 1을 더한 값이 포함됩니다. 서버는 ACK 패킷을 받으면 연결이 수립되었다는 것을 확인하고, ESTABLISHED 상태로 전환됩니다. 클라이언트는 ACK 패킷을 보내고, ESTABLISHED 상태로 전환됩니다.

3. HTTP 통신을 통해서 서버에 리소스를 요청

서버와 연결되면 브라우저는 필요한 리소스들을 요청합니다. 그리고 서버에서는 브라우저에서 요청한 파일들을 찾고, 브라우저에게 전달합니다. 브라우저는 서버로부터 받은 파일을 가지고 렌더링 과정을 시작합니다

브라우저의 렌더링 과정

브라우저는 화면을 그리기 위해 필요한 HTML, CSS, JS, 이미지 등을 서버에 요청합니다. 그리고 해당 파일들을 파싱하여 DOM, CSSOM, Render Tree 등을 생성합니다. 이를 통해서 브라우저는 화면에 각 요소들을 배치하고 스타일을 적용시켜 페이지를 렌더링합니다.

1. HTML 파싱 및 DOM(Document Object Model) 생성

브라우저는 먼저 서버에 요청해서 받은 HTML 파일을 파싱하여 DOM을 생성합니다.

DOM은 웹 페이지의 구조를 객체 트리 형태로 표현하고 있습니다. 그리고 각각의 HTML 요소(태그), 속성, 텍스트 등은 DOM의 노드(Node)로 표현됩니다. 웹 개발자는 JavaScript를 통해 DOM을 조작하면 웹 페이지의 요소를 동적으로 변경하거나 이벤트를 처리할 수 있습니다.

2. CSS 파싱 및 CSSOM(CSS Object Model) 생성

HTML에서 <link>와 <style> 태그를 사용하면 웹 페이지에 스타일을 적용할 수 있습니다. 브라우저는 DOM을 생성하다가 두 태그를 만나면 DOM의 생성을 잠시 중단합니다. 그리고 CSS를 파싱해서 CSSOM을 생성합니다. 그리고 CSSOM의 생성이 완료되면 브라우저는 DOM을 이전에 중단된 부분부터 다시 생성하기 시작합니다.

CSSOM은 웹 페이지에 적용된 CSS 스타일 규칙을 객체 트리 형태로 표현하고 있습니다. 각각의 CSS 선택자, 속성, 값 등은 CSSOM의 객체로 매핑되어 웹 페이지의 스타일 정보를 제어할 수 있습니다. 웹 개발자는 JavaScript를 통해 CSSOM을 조작하면 웹 페이지의 스타일을 동적으로 변경하거나, 애니메이션 등을 만들 수 있습니다.

4. Attachment 및 Redner Tree 생성

Attachment는 DOM과 CSSSOM을 연결하여 Render Tree를 생성하는 과정을 의미합니다. Render Tree는 화면에 표시되는 요소들과 그들의 스타일, 레이아웃 정보를 포함합니다. Render Tree는 DOM의 일부 요소를 선택하여 생성되며, 실제로 화면에 표시될 요소들을 결정합니다.

Render Tree에는 display: none과 같이 화면에 표시되지 않는 내용들은 포함되지 않습니다. 하지만 opacity: 0, visibility: hidden과 같이 크기를 가지고 있는 요소들은 Render Tree에 포함됩니다.

5. 레이아웃 계산(Reflow) 및 페인팅(Repaint)

Render Tree가 완성되면 각 요소를 실제로 화면에 그리기 위한 과정을 진행합니다.

Reflow는 Render Tree의 각 요소에 대해 레이아웃을 계산합니다. 레이아웃은 요소의 크기, 위치, 배치 등을 결정합니다. 레이아웃의 계산은 DOM의 변경과 크기를 결정하는 width, height 같은 스타일이 변경되었을 때 다시 실행됩니다.

Repaint는 계산된 레이아웃을 화면에 요소를 그리는 과정입니다. Repaint는 Reflow가 실행되면 항상 다시 실행됩니다. 하지만 Repaint만 실행되는 경우도 있습니다. CSS에서 color 가 변경되었을 경우에는 레이아웃을 유지하고 픽셀에 색상만 변경합니다. 이러한 경우에는 Reflow는 생략되고 Repaint만 실행됩니다.

동적인 웹 사이트를 개발할 때는 Reflow와 Repaint를 신경 써야 합니다. Reflow와 Repaint 과정은 굉장히 빠르게 실행되고 반영됩니다. 하지만 수십 번 반복적으로 발생한다면 사이트의 성능을 저하시키고 사용자 경험을 떨어트릴 수 있습니다.

참고 자료

• 브라우저의 주소 표시줄에 URL을 입력하면 어떻게 되나요? | 제작: Srikrishna S | 보통 (medium.com)
• https://d2.naver.com/helloworld/59361