2024. 1. 18. 02:13ㆍBackend/Internet
브라우저란 무엇인가
브라우저란 유저가 웹 페이지를 구현된 대로 볼 수 있도록 하는 어플리케이션을 의미한다.
브라우저의 구성 요소
웹 어플리케이션과 마찬가지로 브라우저 또한 프론트엔드와 백엔드가 나눠져 있다. 프론트에서는 웹 페이지가 브라우저 상에서 표시되는 방식을 결정하고, 백엔드에서는 웹 페이지를 표시하는 데 필요한 데이터를 주고받는다. 이는 다음과 같은 구성 요소로 되어 있다.
- 유저 인터페이스 (User Interface) : 주소 표시줄, 뒤로가기 버튼, 홈 버튼 등의 웹 페이지 동작과 관련된 동작을 제어하는 컴포넌트
- 브라우저 엔진 (Browser Engine) : 브라우저의 핵심 구성요소. UI를 직접 호출하는 쿼링을 하거나 렌더링 엔진을 매개하여 웹 페이지를 빠르게 구성해 낸다.
- 렌더링 엔진 (Rendering Engine) : 웹 페이지를 렌더링하는 엔진. HTML을 해석하고 XML, CSS를 사용하여 페이지의 레이아웃을 생성한다.
- 네트워크 (Networking) : HTTP, FTP 등의 프로토콜 제어
- 자바스크립트 인터프리터 (Javascript Interpreter) : 웹 페이지에 포함된 자바스크립트를 해석하여 렌더링 엔진에 적용
- UI Backend : 브라우저의 창 틀 (OS 관련) 동작 제어
- Data persistance : 쿠키 등 저장
브라우저의 작동 방식
브라우저는 유저에게 웹 페이지를 보여주기 위해 작동하므로, 빠르게 웹 페이지를 로딩해야 한다.
Navigation
웹 페이지를 로딩하는 첫 번째 과정으로, URL을 주소창에 입력하고 엔터를 누르면 시작된다.
- DNS lookup : 사용자가 입력한 주소를 IP 주소로 변환한다.
- TCP handshake : TCP 프로토콜에 맞추어 웹 서버와 연결 시도 통신을 주고받는다.
- TLS negotiation : HTTPS 암호화 된 웹 페이지의 경우, 웹 페이지 암호화 통신 방식을 조율한다.
Response
웹 서버와 커넥션이 형성되면, 브라우저는 웹 서버에 웹 페이지 HTML을 얻기 위한 HTTP GET 요청을 보낸다.
- Congetion control, TCP slow start
- 웹 페이지 데이터는 작은 패킷으로 나눠져 전송된다.
- 패킷을 보낼 때마다 ACK 신호 (TCP handshake 에 사용되는 숫자)를 발송한다면 시간, 비용 면에서 비효율적이다.
- 따라서 TCP slow start 알고리즘을 적용하여 ACK 신호의 전송 주기를 조절한다.
Parsing
브라우저가 첫 데이터 덩어리를 받고 나면, HTML 해석기인 DOM(Document Object Model)과 CSS 해석기인 CSSOM(CSS Object Model) 가 해석 가능한 데이터로 변환하는 파싱 과정을 거친다.
- DOM 트리 생성
- HTML 을 파싱하여 토큰에 담을 정보를 구성하고, 태그별로 요소를 분류한다.
- HTML 문서는
<html>로 시작하고,<head>와<body>를 갖는 구성으로 되어 있다. - 이미지처럼 HTML 문서를 로딩하는 동시에 불러와야 하는 것들은
<script>태그 안에서 비동기로 불러온다. (async)
- Preload Scanner
- DOM 트리 생성이 웹 페이지 로딩의 주요 과정이므로, 메인 스레드를 정유하게 된다.
- 그동안 Preload Scanner는 스크립트, 이미지 등 웹 페이지 로딩에 필요한 다른 요소들을 미리 해석한다.
- CSSOM 트리 생성
- CSSOM 은 DOM 과는 독립적인 구성요소로, CSS 선택자에 맞춰 웹 페이지의 디자인 요소들을 분류한다.
- 이 과정은 DNS lookup 보다 짧은 시간이 걸릴 정도로 빠르게 일어나는 작업이다.
- 그 밖의 프로세스
- 자바스크립트 컴파일 : 웹 페이지 동작에 필요한 스크립트를 파싱하고 해석한다.
- Acceccibility 트리 생성 : 웹 페이지 로딩에 적절한 기기 목록을 AOM (Accessibility Object Model) 형태로 구성한다.
Render
렌더링은 스타일, 레이아웃, 색상 등을 조합하여 웹 페이지를 만들어 내는 과정이다.
- 스타일 (Style)
- 생성된 DOM 트리와 CSSOM 트리를 렌더링 트리에 넣는다.
- 렌더링 트리의 각 노드를 순회하며 각 요소의 노출 여부, CSS 적용 여부를 보여질 요소 (visible node)에 저장한다.
- 레이아웃 (Layout)
- 레이아웃은 웹 페이지를 구성하는 각 요소가 어느 위치에, 어느 크기로 놓여있는지 결정하는 것이다.
- 브라우저가 실행되는 장치마다 화면 크기가 다르므로, 구성 요소들의 속성값에 따라 공간을 할당하여 배치한다.
- 페인트 (Paint)
- 페인트는 말 그대로 글자, 테두리, 버튼, 이미지 등 구성 요소에 색상을 적용하는 과정이다.
- 부드러운 로딩과 화면 전환을 위해 메인 스레드에서 실행된다.
- 결합 (Compositing)
- 렌더링한 요소들을 결합하여 최종적인 페이지를 생성하는 과정이다.
- 화면은 사용자에 의해 계속해서 호출되므로 중간에 부분적으로 렌더링을 수정해야 하는 과정이 있을 수 있다. 이 과정에서 그 스텝 지정도 담당한다.
Interactivity
렌더링이 끝나면 웹 페이지 호출이 끝난 것이 아니다. 메인 스레드에서는 스크롤링, 터치 등 상호작용에 대한 자바스크립트 코드를 로딩한다.
이 과정 또한 메인 스레드에서 실행되므로 매우 빨리 일어나고, 유저가 거의 동시에 반응하는 것처럼 느끼게 해준다.
요약
브라우저는 웹 페이지를 유저가 보고 동작을 취할 수 있도록 해주는 어플리케이션이다.
우리가 웹 페이지를 호출할 경우 주소를 찾고, 응답으로 온 데이터를 파싱, 렌더링, 컴파일, 조합하여 보여준다.
마치며
통신 전반에 대한 이해도가 올라간 후에 좀 더 깊게 살펴봐야겠다.
Resources
'Backend > Internet' 카테고리의 다른 글
| 호스팅이란 무엇인가 (1) | 2024.01.22 |
|---|---|
| 도메인 이름은 무엇인가 (1) | 2024.01.22 |
| DNS는 어떻게 동작하는가 (0) | 2024.01.22 |
| HTTP란 무엇인가 (1) | 2024.01.15 |
| 인터넷은 어떻게 동작하는가 (1) | 2024.01.11 |