브라우저 동작원리

Browser / 면접질문

2023.04.10.

브라우저 동작원리

사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹사이트를 원한다. 따라서 개발자는 이 두가지 목표를 달성하기위해 성능을 향상시키는 방법을 고민하게 되는데, 이를 위해 브라우저의 동작원리를 이해하는 것이 중요하다.

TL;DR

브라우저는 탐색, 네트워크, 렌더링 세 가지 주요 과정을 거친다.
탐색은 웹페이지를 로딩하는 첫 단계다. 사용자가 주소창에 URL을 입력하거나, 링크를 클릭 또는 폼을 제출하는 등의 동작을 통해 요청을 보낼 때마다 발생한다.
렌더링은 브라우저가 HTML, CSS, 자바스크립트를 해석하고 화면에 표시하는 과정이다.
렌더링은 DOM 트리 생성, CSSOM 트리 생성, 렌더 트리 생성, 레이아웃, 페인팅, 컴포지팅으로 이루어진다.

탐색

탐색은 웹페이지를 로딩하는 첫 단계다. 사용자가 주소창에 URL을 입력하거나, 링크를 클릭 또는 폼을 제출하는 등의 동작을 통해 요청을 보낼 때마다 발생한다.

DNS 조회

탐색의 첫 단계는 해당 페이지의 자원이 어디에 위치하는지 찾는 것이다. 예를들어 https://www.google.com을 탐색한다면 HTML 페이지는 IP 주소가 192.168.0.1인 서버에 위치하고 있다는 것을 알아야 한다. 만약 이 사이트를 한 번도 방문한 적이 없다면 DNS 조회가 필요하다.

브라우저는 DNS 조회를 위해 OS에게 요청을 보낸다. OS는 DNS 캐시를 확인하고, 만약 캐시가 없다면 DNS 서버에 요청을 보낸다. DNS 서버는 www.google.com의 IP 주소를 반환한다.

만약 글꼴, 이미지, 스크립트, CSS 파일 등의 자원이 다른 서버에 위치한다면, 브라우저는 이들에 대한 DNS 조회를 반복한다.

TCP 연결

IP 주소를 알게 되면, 브라우저는 해당 서버에 TCP 연결을 요청한다. TCP 연결은 3-way handshake를 통해 이루어진다.

TLS 연결

만약 서버가 HTTPS를 사용한다면, 브라우저는 TLS 연결을 요청한다. TLS 연결은 3-way handshake를 통해 이루어진다.

HTTP 요청

TCP 연결이 성공적으로 이루어지면, 브라우저는 HTTP 요청을 보낸다. HTTP 요청은 다음과 같은 형태를 띈다.

GET / HTTP/1.1
Host: www.google.com

HTTP 응답

서버는 HTTP 요청을 받고, 요청에 대한 응답을 보낸다. 응답은 다음과 같은 형태를 띈다.

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>Google</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

렌더링

렌더링은 브라우저가 HTML, CSS, 자바스크립트를 해석하고 화면에 표시하는 과정이다.

HTML 파싱

브라우저는 HTML을 파싱하여 DOM 트리를 생성한다. DOM 트리는 HTML 요소를 노드로 표현한 것이다. 브라우저는 HTML을 파싱하는 동안, 자바스크립트를 만나면 파싱을 중단하고, 자바스크립트 실행을 시작한다.

프리로드 스캐너

브라우저가 DOM 트리를 만드는 프로세스는 메인 스레드에서 이루어진다. 만약 자바스크립트가 DOM 트리를 변경한다면, 브라우저는 DOM 트리를 다시 파싱해야 한다. 이러한 문제를 해결하기 위해, 브라우저는 프리로드 스캐너를 사용한다. 프리로드 스캐너는 사용 가능한 컨텐츠를 분석하고 CSS나 JS, 웹 폰트 같이 렌더링에 필요한 자원을 미리 다운로드한다.

CSS 파싱

브라우저는 CSS를 파싱하여 CSSOM 트리를 생성한다. CSSOM 트리는 CSS 규칙을 노드로 표현한 것이다.

렌더 트리 생성

브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 브라우저가 화면에 표시할 요소를 노드로 표현한 것이다. 렌더 트리는 다음과 같은 규칙을 따른다.

렌더 트리에는 DOM 트리에 있는 모든 요소가 포함된다.
렌더 트리에는 CSSOM 트리에 있는 스타일 규칙이 적용된 요소만 포함된다.
렌더 트리에는 자바스크립트에 의해 추가된 요소가 포함된다.
렌더 트리에는 display: none속성이 적용된 요소가 포함되지 않는다.
visibility: hidden 속성이 적용된 요소는 렌더 트리에 포함되지만, 화면에는 표시되지 않는다.
렌더 트리에는 <head> 요소가 포함되지 않는다.

레이아웃

브라우저는 렌더 트리를 사용하여 각 요소의 위치와 크기를 계산한다. 이 과정을 레이아웃이라고 한다.

리플로우는 레이아웃 이후에 있는 페이지의 일부분이나 전체 문서에 대한 크기나 위치에 대한 결정이다.

첫 번째 레이아웃 과정이후 이미지가 로드되어 이미지 크기가 계산된 이후 리플로우가 일어나게 된다.

페인트

브라우저는 레이아웃 단계에서 계산된 각 박스를 실제 화면의 픽셀로 변환한다. 이 과정을 페인트라고 한다. 페인트 과정에서는 텍스트, 색상, 그림자, 테두리 등을 화면에 표시한다.

페인팅은 레이아웃 트리의 요소를 레이어로 분리할 수 있다. 레이어를 가동시키는 구체적인 속성과 요소는 다음과 같다.

CSS 속성
- opacity
- transform
- filter
- clip-path
- mask
- will-change
- position: fixed
- position: sticky
- will-change
HTML 속성
- video
- canvas
- webgl
- iframe

컴포지팅

문서의 각 섹션이 다른 레이어에서 그려질 때, 섹션을 겹쳐놓으면서 올바른 순서로 화면에 표시하는 것을 컴포지팅이라고 한다.