[Web] 브라우저 동작 방법

브라우저

브라우저는 사용자가 인터넷을 통해 웹 페이지를 보고 상호작용하는데 사용되는 응용 소프트웨어이다.

이것은 동기적으로 HTML, CSS, JS 언어를 해석하고, 이를 시각적인 형태로 사용자의 화면에 표시하는 역할을 수행한다.

 

브라우저는 웹 페이지를 보기 위해 웹 서버에 필요한 자원을 요청하고, 웹 서버는 이 요청에 대해 응답하여 필요한 자원을 제공하고, 브라우저는 이를 받아서 해석한다. 이 때, 웹 페이지의 형태는 다양하며 HTML, PDF, 이미지 등 여러 형식으로 제공될 수 있다.

 

브라우저는 HTML과 CSS의 명세에 따라 웹 페이지를 해석하여 표시한다. 이 명세는 W3C(World Wide Web Consortium)에서 관리되며, 웹 페이지를 일관되고 표준화된 방식으로 해석하도록 지침을 제공한다.

 

대표적인 브라우저 종류로는 Chrome, 네이버 웨일, 사파리, 파이어폭스 등이 있다.

 

브라우저 구조

1. 사용자 인터페이스
   • 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
     
     
2. 브라우저 엔진
   • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 약할
   • 데이터 스토리지를 참조하여 로컬에 데이터를 쓰거나 읽는 등의 작업을 수행
   • 즉, 사용자가 입력한 명령을 받아 처리하고, 렌더링 엔진에게 웹 페이지를 어떻게 표시할지 지시
     
     
3. 렌더링 엔진
   • 웹 서버로부터 받은 웹 페이지의 자원을 브라우저 화면에 나타내는 역할
   • 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model)과 CSSOM(CSS Object Model) 트리로 변환하고, 이를 결합하여 렌더 트리를 생성
   • 렌더 트리 : 화면에 표시되는 요소들을 포함하고 있으며, 브라우저는 이를 기반으로 웹 페이지를 렌더링
     
     
4. 통신
   • 서버와의 네트워크 호출을 가능하게 하는 기능
   • HTTP 요청 등을 사용하여 웹 서버로부터 웹 페이지의 자원을 요청하고 응답을 받아오는 것
     
     
5. UI 백엔드
   • 기본적인 위젯들을 그리는 인터페이스를 담당
   • 위젯 : INPUT, SELECT 등 사용자가 웹 페이지와 상호작용할 때 사용하는 요소들
     
     
6. 자바스크립트 해석기
   • 웹 페이지에 포함된 자바스크립트 코드를 해석하고 실행하는 역할
   • 동적인 기능을 추가하고 웹 페이지의 상호작용성을 높일 수 있다.
     
     
7. 자료 저장소
   • 브라우저가 쿠키, 로컬 저장소, Indexed DB 등을 활용하여 다양한 종류의 자원을 저장하는 영역
   • 사용자의 데이터를 보존하거나 웹 페이지의 상태를 관리할 수 있다.

 

렌더링 엔진

렌더링 엔진은 브라우저에서 웹 페이지를 화면에 표시하는 역할을 담당하는 컴포넌트이다. 즉, HTML, 이미지, CSS 등을 해석하고 브라우저 화면에 적절하게 렌더링하여 사용자가 볼 수 있도록 한다.

렌더링 엔진의 종류

• 파피어폭스 : 게코(Gecko) 엔진
• 사파리 : 웹킷(Webkit) 엔진
• 크롬 : Blink 엔진

렌더링 동작 과정

1. 통신 : 웹 서버로부터 요청한 문서의 내용을 받아온다. 일반적으로 문서의 내용은 8KB 단위로 전송된다.
2. 파싱(Parsing) : 받아온 HTML 문서를 파싱하여 콘텐츠 트리(Content Tree)로 변환한다. 이때 HTML 태그들은 DOM(Document Object Model)로 변환 된다.
3. 스타일 처리 : 외부 CSS 파일과 함께 포함된 CSS 요소들도 파싱되어 렌더 트리(Render Tree)를 생성한다. 렌더 트리는 시각적인 속성을 포함하는 사각형들의 집합으로 이루어져 있으며, 이것들이 정해진 순서대로 화면에 표시된다.
4. 배치(Layout) : 렌더 트리의 각 노드가 화면의 정확한 위치에 배치되는 과정이다. 이를 통해 각 요소의 크기와 위치가 결정된다.
5. 그리기 : UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어내는 과정이다. 이렇게 만들어진 형상들이 화면에 표시된다.

렌더링 엔진은 이러한 과정을 점진적으로 진행한다. 즉, 모든 HTML을 파싱할 때까지 기다리지 않고 일부 내용을 먼저 화면에 표시하여 빠른 화면 로딩을 지원한다. 네트워크로부터 나머지 내용이 전송되는 동안 받은 내용의 일부를 먼저 화면에 렌더링하므로 사용자는 더 나은 사용자 경험을 얻을 수 있다.

 

브라우저 동작 과정

탐색(Navigation)

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

DNS Lookup (도메인 이름 해석)

사용자가 URL을 입력하거나 링크를 클릭하면, 브라우저는 해당 URL에 대한 호스트의 IP 주소를 알아야 한다. 이를 위해 DNS(Domain Name System) 서버에 도메인 이름을 조회한다. DNS 서버는 IP 주소를 반환하여 브라우저가 서버와 통신할 준비를 한다. 이후 IP 주소는 캐시되어 다음에 같은 도메인을 요청할 때 재조회를 하지 않고 빠르게 접속할 수 있게 된다.

TCP Handshake (TCP 연결 설정)

브라우저는 서버와의 통신을 위해 TCP 연결을 설정한다. 이를 위해 "SYN-SYN-ACK" 세 가지 메시지를 사용하여 TCP 세션을 수립한다.

TLS Handshake (보안 연결 설정)

HTTPS 프로토콜로 암호화된 연결을 수립하기 위해 TLS(Transport Layer Security) 핸드셰이크 과정이 진행된다. 이 과정에서 서버의 인증, 암호화 통신 방식 등이 확인되며, 실제 데이터 전송에 앞서 안전한 연결이 수립된다.

HTTP Request (요청)

브라우저는 웹 서버로 HTTP GET 요청을 보낸다. 이때 보통 HTML 파일을 요청하게 된다.

HTTP Response (응답)

서버는 브라우저의 요청을 받고, 요청에 대한 응답으로 HTML 문서와 관련 리소스들(이미지, CSS, JavaScript 등)을 전달한다.

Parsing (구문 분석)

브라우저는 받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 구축한다. 이 단계에서 HTML 태그와 요소들의 구조와 계층 구조를 파악한다.

Building the DOM tree (DOM 트리 구축)

파싱된 정보를 기반으로 브라우저는 DOM 트리를 생성한다. 이 트리는 문서의 구조를 계층적으로 표현하며, 각 DOM 노드가 HTML 요소를 나타낸다.

Building the CSSOM tree (CSSOM 트리 구축)

CSS 스타일 정보도 파싱되어 CSSOM(CSS Object Model) 트리를 구축한다. CSSOM은 DOM과 유사한 계층 구조로서, CSS 스타일 규칙과 요소들의 스타일 정보를 포함한다.

Rendering (렌더링)

DOM과 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성한다. 렌더 트리는 실제로 화면에 표시될 요소들의 집합으로, 각 요소의 위치와 스타일 정보를 반영한다.

Layout (레이아웃)

렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하는 레이아웃 단계를 수행한다. 레이아웃은 페이지 내 요소들의 정확한 배치를 결정하고, 화면에 표시되는 위치를 결정한다.

Paint (페인팅)

레이아웃 단계에서 계산된 요소들의 크기와 위치를 화면에 실제로 그리는 페인팅 작업이 수행된다. 요소들의 텍스트, 색상, 경계선, 그림자 등이 화면에 표시된다.

Compositing

페인팅된 요소들이 서로 겹치거나 복잡한 계층 구조를 가질 경우, 올바른 순서로 그려지도록 조정하는 컴포짓팅 작업이 수행된다.

Interactivity (상호작용)

웹 페이지의 요소들이 모두 렌더링되고 나면, 페이지가 상호작용 가능한 상태가 된다. 사용자의 스크롤, 클릭 등의 상호작용에 대응하여 페이지가 즉시 반응하도록 되어 있어야 다.

 

[참고] https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

https://d2.naver.com/helloworld/59361