브라우저 동작 원리: 구조부터 렌더링까지 심층분석

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *웹 개발자** (중급 이상)
• *난이도**: 브라우저 내부 동작 원리를 이해하고자 하는 개발자에게 유용

핵심 요약

• 브라우저는 주소창 입력부터 렌더링까지 IPC(프로세스 간 통신), DNS Lookup, TCP/HTTPS, V8 엔진, 렌더링 파이프라인** 등 복잡한 과정을 거칩니다.
• 렌더링 파이프라인은 DOM 생성 → 스타일 계산 → 레이아웃 → 페인트 → 합성 단계로 구성됩니다.
• V8 엔진은 Ignition과 TurboFan으로 구성되어 Byte Code 생성 및 JIT 컴파일을 통해 성능 최적화를 수행합니다.

섹션별 세부 요약

1. 브라우저 프로세스 구조

• 브라우저 프로세스는 주소창, 네트워크 요청 처리, 보안 관리 등의 역할을 수행합니다.
• 렌더러 프로세스는 웹 페이지의 HTML/CSS/JS를 파싱 및 렌더링하는 역할을 합니다.
• 두 프로세스는 IPC를 통해 데이터를 교환하며, 멀티프로세스 구조로 안정성과 보안을 확보합니다.

2. URL 입력 후 처리 흐름

• URL/검색어 구분: ftp://, www. 등으로 시작하는 경우 URL로 판단, 스페이스/특수문자 포함 시 검색어로 처리.
• DNS Lookup: 도메인 IP 주소를 캐시 또는 DNS 리졸루션을 통해 확인.
• TCP 3-Way Handshake: SYN → SYN-ACK → ACK 순서로 연결 확립.
• HTTPS: TLS 핸드셰이크를 통해 데이터 암호화, 서버 인증, 무결성 보장.

3. 렌더러 프로세스 내부 동작

• HTML 파싱: 토큰화 및 트리구축 과정을 통해 DOM트리 생성.
• CSS 파싱: CSSSOM 트리 생성 후, DOM + CSSOM을 결합하여 렌더트리 구성.
• JavaScript 실행: V8 엔진의 Ignition 및 TurboFan을 통해 Byte Code 생성 및 JIT 컴파일.
• 프리로드 스캐너: , 등 외부 리소스를 병렬로 로드하여 파싱 중단 방지.

4. 렌더링 파이프라인

• 레이아웃(Layout): 렌더트리 노드의 위치 및 크기 결정.
• 페인트(Paint): 노드별 그래픽 정보를 생성하여 화면에 그림.
• 합성(Composite): GPU를 활용해 레이어별 타일을 합성하여 최종 화면 생성.
• 리플로우/리페인트 최적화: DOM/스타일 변경 시 렌더트리 재구성 최소화.

결론

• 렌더링 성능 최적화를 위해