Source: Dev.to

브라우저는 어떻게 동작할까? – 초보자를 위한 브라우저 내부 구조 가이드

1. 개요

웹 브라우저는 사용자가 URL을 입력하거나 링크를 클릭했을 때, 그 요청을 처리하고 화면에 결과를 보여주는 복합적인 소프트웨어 시스템입니다. 이 가이드에서는 브라우저가 내부적으로 어떤 단계와 구성 요소를 거쳐 페이지를 로드하고 렌더링하는지, 주요 용어와 흐름을 친절하게 설명합니다.

2. 브라우저 아키텍처의 주요 구성 요소

3. 페이지 로드 흐름

1. URL 입력 → 네트워킹 스택이 DNS 조회 후 서버에 HTTP(S) 요청을 보냅니다.
2. 서버 응답(HTML, CSS, JS, 이미지 등)이 도착하면 렌더링 엔진이 HTML을 파싱해 DOM 트리를 생성합니다.
3. 동시에 CSS 파일을 파싱해 CSSOM(CSS Object Model)을 만듭니다.
4. DOM과 CSSOM을 결합해 렌더 트리를 구성하고, 레이아웃 단계에서 각 요소의 좌표와 크기를 계산합니다.
5. 페인팅 단계에서 레이어를 비트맵으로 변환하고, GPU에 전달해 화면에 표시합니다.
6. HTML 파싱 도중 <script> 태그를 만나면 자바스크립트 엔진이 코드를 실행합니다. 이때 렌더링 파이프라인이 일시 중단될 수 있습니다(특히 document.write나 동기식 스크립트).

Tip: 비동기(async, defer) 스크립트를 사용하면 파싱과 렌더링이 방해받지 않아 페이지 로드 속도가 개선됩니다.

4. 자바스크립트 엔진 내부

4.1 파싱 & 컴파일

• 파서가 소스 코드를 토큰화하고 AST(Abstract Syntax Tree)를 생성합니다.
• V8 같은 엔진은 Ignition(인터프리터)와 TurboFan(최적화 컴파일러)를 사용해 처음엔 인터프리터로 실행하고, 핫코드(자주 호출되는 함수)를 JIT 컴파일합니다.

4.2 실행 컨텍스트와 콜 스택

function foo() {
  console.log('Hello');
}
foo();

위 코드는 전역 실행 컨텍스트 → foo 함수 실행 컨텍스트 순으로 콜 스택에 쌓이고, 실행이 끝나면 차례대로 팝됩니다.

4.3 이벤트 루프와 태스크 큐

• 마이크로태스크 큐(Promise, process.nextTick)와 매크로태스크 큐(setTimeout, I/O)로 비동기 작업을 관리합니다.
• 이벤트 루프는 현재 콜 스택이 비어 있으면 마이크로태스크 큐를 먼저 비우고, 그 다음 매크로태스크 큐를 실행합니다.

5. 네트워킹과 캐시

• HTTP/2와 **HTTP/3 (QUIC)**는 다중 스트림, 헤더 압축, 연결 재사용을 통해 레이턴시를 크게 낮춥니다.
• 브라우저는 Cache-Control, ETag, Last-Modified 헤더를 활용해 리소스를 로컬에 저장하고, 재요청 시 조건부 GET을 수행합니다.

6. 멀티프로세스와 보안

이러한 격리 모델은 샌드박스와 Same‑Origin Policy를 통해 악성 코드가 다른 탭이나 시스템 전체에 영향을 주는 것을 방지합니다.

7. 최적화 팁 (개발자를 위한)

8. 결론

브라우저는 네트워킹 → 파싱 → 스크립트 실행 → 레이아웃 → 페인팅이라는 일련의 파이프라인을 통해 웹 페이지를 화면에 그립니다. 각 단계는 독립적인 모듈과 스레드(또는 프로세스)로 구성되어 있어, 성능 최적화와 보안을 동시에 달성할 수 있습니다.

이 가이드를 통해 브라우저 내부 동작을 이해하고, 실제 개발 시 렌더링 차단 리소스를 최소화하고 비동기 로드를 적절히 활용한다면 사용자에게 더 빠르고 부드러운 경험을 제공할 수 있습니다.

www.twitter.com을 입력하고 Enter를 눌렀을 때 실제로 일어나는 일

You’ve probably typed www.twitter.com into your browser thousands of times.
Twitter opens almost instantly… but have you ever wondered what actually happens inside the browser during those few milliseconds?

A browser doesn’t just “open a website.” It goes on a fast, complex journey to fetch, understand, organize, and finally display the page on your screen. In this guide we’ll break that journey down step by step — without unnecessary jargon.

브라우저란 무엇인가?

A 브라우저는 사용자와 서버 사이의 다리 역할을 하여 인터넷상의 정보를 접근할 수 있게 해주는 애플리케이션입니다.

인기 있는 브라우저는 다음과 같습니다:

• Google Chrome
• Safari
• Firefox
• Microsoft Edge
• Brave
• Opera

이 브라우저 중 하나에서 검색하거나 웹사이트를 열면, 밀리초 단위로 눈에 보이지 않게 많은 일이 일어납니다.

The Main Parts of a Browser (High-Level)

Think of a browser like a team of workers, each with a specific role.

1. User Interface (UI)

Everything you interact with:

• Address bar
• Tabs
• Back/forward buttons
• Bookmarks

Note: The UI does not display the website itself — it’s only for interaction.

2. Browser Engine

The coordinator that connects the UI with the Rendering Engine and tells other components what to do and when.

3. Rendering Engine

The artist that turns raw HTML and CSS into the visual webpage you see.

• Chrome → Blink
• Firefox → Gecko
• Safari → WebKit

4. JavaScript Engine

The specialist that executes JavaScript code and handles logic, events, and dynamic behavior.

• Chrome → V8
• Firefox → SpiderMonkey

5. Networking

The delivery team responsible for fetching HTML, CSS, JavaScript, images, fonts — everything needed from the server.

6. Data Storage

The storeroom that holds:

• Cache
• Cookies
• LocalStorage
• SessionStorage

This helps make future visits faster.

7. Graphics / UI Backend

The painter that draws text, images, shapes, and layouts on your screen using low‑level graphics APIs.

고수준 브라우저 흐름

UI
 ↓
Browser Engine
 ↓
Rendering Engine + JavaScript Engine
 ↓
Networking
 ↓
Storage
 ↓
Screen

Networking: Fetching the Website

URL을 입력하고 Enter 키를 누르면:

1. Cache check – 유효한 사본이 있으면 페이지가 즉시 로드될 수 있습니다.
2. 없을 경우, 브라우저는 twitter.com을 IP 주소로 변환하기 위해 DNS lookup을 수행합니다.
3. 브라우저는 해당 IP로 HTTP request를 보냅니다.
4. 서버는 HTML, CSS, JavaScript 및 기타 자산을 응답합니다.

이제 브라우저는 원시 파일들을 가지고 있지만, 아직 화면에 표시할 수는 없습니다.

HTML 파싱 및 DOM 생성

브라우저는 HTML을 파싱하고 이를 DOM (Document Object Model) 으로 변환합니다. DOM은 페이지 내용을 나타내는 트리‑같은 구조입니다.

예제 HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

DOM 트리 (파싱 후)

HTML
 └── BODY
      ├── H1
      │    └── "Hello"
      └── P
           └── "Welcome"

파싱은 마크업을 의미 있는 조각으로 나누어 브라우저가 이해할 수 있도록 하는 과정입니다.

CSS 파싱 및 CSSOM 생성

CSS는 별도로 파싱됩니다. 브라우저는 CSS를 CSSOM (CSS 객체 모델) 로 변환하며, 이는 색상, 글꼴, 크기 및 레이아웃 규칙을 정의합니다. DOM이 어떤 요소가 존재하는지 설명한다면, CSSOM은 그 요소들이 어떻게 보여야 하는지 설명합니다.

DOM + CSSOM = Render Tree

브라우저는 DOM(구조)과 CSSOM(스타일)을 결합하여 Render Tree를 생성합니다. 이 트리는:

• 보이는 요소만 포함합니다
• 페이지를 그리기 위한 청사진 역할을 합니다

레이아웃 (리플로우), 페인팅 및 디스플레이

렌더 트리가 준비되면, 브라우저는 세 가지 최종 단계로 진행합니다.

1. 레이아웃 (리플로우)

각 요소의 정확한 위치, 너비 및 높이를 계산하여 화면에 모든 것이 어디에 배치될지 결정합니다.

2. 페인팅

텍스트, 색상, 이미지, 테두리, 그림자 등 픽셀을 채웁니다.

3. 디스플레이 (컴포징)

모든 페인팅된 레이어를 결합하고 최종 이미지를 화면에 표시합니다. 바로 이 순간에 웹페이지가 실제로 보이게 됩니다.

전체 흐름 (큰 그림)

URL typed
 ↓
DNS lookup + HTTP request
 ↓
HTML → DOM
CSS → CSSOM
 ↓
DOM + CSSOM → Render Tree
 ↓
Layout (Reflow)
 ↓
Paint
 ↓
Pixels on screen

Final Thought

Don’t focus on memorizing component names. Focus on the journey:

Fetch → Understand → Organize → Draw

Every time you open a website, your browser runs this entire pipeline in milliseconds — quietly, efficiently, and repeatedly. And that’s what makes the web feel instant. 🚀