Overview
웹 브라우저는 사용자가 입력한 주소(URL)를 통해 웹 서버로부터 데이터를 받아와 화면에 보여주는 복잡한 과정을 수행한다. 이 글에서는 브라우저가 웹사이트에 접속할 때 내부적으로 어떤 일이 일어나는지를 순서대로 알아본다.
크게는 Construction(구성) 단계와 Operation(동작) 단계로 나뉘며, 다음과 같은 절차를 거친다.
- DNS 조회: 사용자가 입력한 도메인 주소를 IP 주소로 변환
- 서버와 3-Way Handshake: TCP 연결을 위한 SYN, SYN/ACK, ACK 절차 수행
- HTTP 통신: 서버에 HTTP Request 요청 → HTTP Response 응답 수신
- 파싱과 렌더링 준비
- HTML 파싱 → DOM 트리 생성
- CSS 파싱 → CSSOM 트리 생성
- JS 파싱 및 실행 → AST 생성
- DOM + CSSOM → Render Tree 생성
- 렌더링 실행
- Layout: 요소들의 위치 계산
- Painting: 실제 화면에 요소 그리기
- Composition: 레이어 조합 및 순서 정리
- 화면 출력 (Display)
브라우저는 전체 데이터를 다 받고 나서 렌더링을 시작하는 것이 아니라, 부분적으로 받은 데이터로 점진적으로 렌더링을 진행하기 때문에 페이지가 순차적으로 뜨는 현상이 발생한다.
📅 관련 글
2023.01.13 - [CS 지식] - [CS 지식1.] 웹 브라우저의 동작원리
2023.02.23 - [CS 지식] - [CS 지식2.] DNS의 동작원리(Domain Name System)
2023.03.06 - [CS 지식] - [CS 지식3.] HTTP / HTTPS 란?
2023.03.07 - [CS 지식] - [CS 지식4.] OSI 7계층 & TCP/IP 4계층이란?
2023.03.17 - [CS 지식] - [CS 지식5.] 가상화란?
2023.05.24 - [CS 지식] - [CS 지식6.] HTTP 메서드(Method)란? / HTTP Status Code
2023.12.05 - [CS 지식] - [CS 지식7.] Kubernetes 구성요소와 Pod 생성 방식이란?
2023.12.19 - [CS 지식] - [CS 지식8.] 프로세스(Process)와 스레드(Thread)란?
2023.12.30 - [CS 지식] - [CS 지식9.] 클라우드 컴퓨팅이란?(Public & Private Cloud / IaaS SaaS PaaS / Multitenancy)
2024.01.05 - [CS 지식] - [CS 지식10.] 웹1.0(Web1.0) vs 웹2.0(Web2.0) vs 웹3.0(Web3.0)
2024.02.02 - [CS 지식] - [CS 지식11.] NAT(Network Address Translation)란?
2024.05.22 - [CS 지식] - [CS 지식13.] 동기 및 비동기 처리란?
2024.05.23 - [CS 지식] - [CS 지식14.] 3tier 아키텍처란?
2024.08.28 - [CS 지식] - [CS 지식15.] SSR vs CSR vs ISR vs SSG
2024.11.09 - [CS 지식] - [CS 지식16.] stdin(표준입력) vs stdout(표준출력) vs stderr(표준에러)
2024.11.11 - [CS 지식] - [CS 지식17.] IPsec vs SSL/TLS
2024.11.22 - [CS 지식] - [CS 지식18.] Quantum Computing(양자 컴퓨팅)
요약 내용
- 사용자가 브라우저로 웹 사이트에 접속(www.a.com)
- DNS를 통해 서버의 아이피 주소를 파악
- 브라우저와 서버가 3 Way Handshake
- 브라우저가 서버에게 HTTP Request(서버에게 데이터 요청)
- 브라우저가 서버로부터 HTTP Response(서버로부터 데이터를 받음)
- 서버로부터 받은 데이터에 HTML 파싱하여 Dom Tree 생성
<style>태그를 만나면 Dom 생성을 잠깐 중지하고 CSS를 파싱하여 CSSOM Tree 생성- 파싱 중간에
<script>태그가 나오면 자바스크립트 엔진에게 권한을 넘겨 자바스크립트 코드를 파싱하여 AST(Abstract Syntax Tree) 코드를 생성 후 실행 - 그리고 DOM + CSSOM = Render Tree를 생성
- 여기까지의 과정을 Construction이라고 한다.
- 그리고 Rendering 엔진은 Render Tree에 있는 Node를 배치(Layout)
- UI 백엔드는 Render Tree에 있는 Node들을 돌면서 화면에 UI를 그림(Painting)
- 마지막으로 Render Tree에 있는 Node들을 순서대로 구성(Composition)
- 여기까지의 과정을 Operation이라고 한다.
- 마지막으로 웹 사용자에게 결과화면을 출력(Display)
중요!
- CSS는 렌더링 차단 리소스이므로 CSS가 완전히 파싱되기 전까지는 화면을 그릴 수 없다.
<script>는 파싱 차단 리소스이므로 HTML 파싱이 중단되고 JS 처리가 먼저 실행된다.- 하지만
<script defer>나<script async>속성을 사용하면 이러한 파싱 차단을 줄일 수 있다.
세부 내용
Construction
STEP1. 웹브라우저 - DNS
사용자가 브라우저로 웹 사이트에 접속(www.a.com) 하면 먼저 웹 브라우저는 DNS에게 호스트의 IP 주소를 물어본다.
그러면 DNS가 IP 주소(1.1.1.1)를 알려준다.
STEP2. 웹브라우저 - Server
그리고 브라우저는 IP 주소에 있는 서버를 찾아갑니다. 이 때 랜덤한 숫자(Random Sequence)를 가지고 간다.
해당 Random Sequence를 가지고 데이터를 주고 받기 위한 3 Way Handshake(SYN - SYN/ACK - ACK)를 한다.
이 과정이 끝나면 브라우저는 서버에게 데이터를 요청한다. 이것을 HTTP Request라고 한다. 그리고 서버는 브라우저에게 데이터를 보내준다. 이것을 HTTP Response라고 한다.
STEP3. 웹브라우저 - Parsing
이 과정이 끝나면 웹 브라우저는 사용자에게 데이터를 출력하기만 하면 된다. 그런데 데이터를 출력하기에 앞서 브라우저는 서버로부터 받은 데이터를 해석해야 한다.
대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML과 CSS를 해석한다. 이렇게 해석하는 것을 Parsing이라고 한다.
먼저 브라우저의 랜더링 엔진은 HTML을 Parsing하여 DOM Tree를 생성한다. 이 때 랜더링 엔진이 Style 태그를 만나면 Dom 생성을 잠깐 중지하고 CSS를 Parsing하여 CSSOM Tree 생성한다.
CSS Parsing을 마치면 조금전에 HTML Parsing이 중단된 지점부터 다시 Parsing을 시작한다. 그러다가 Script 태그를 만나면 다시 Parsing 작업을 중지하고 이번에는 JS Engine(자바 스크립트 엔진)에게 제어 권한을 넘긴다.
JS Engine은 코드를 Parsing하여 추상 구문 Tree인 AST를 만들고 실행한다. 그 다음으로 아까 중단했던 HTML Parsing 작업을 완료 한다. 그리고 브라우저는 DOM Tree + CSSOM Tree = Render Tree를 생성한다.
- HTML Parsing -
<style>만남 , Dom 생성 중지 - CSS Parsing - 다시 HTML Parsing -<script>태그 만남 - HTML Parsing 중지 - JS Engine Parsing - 마지막으로 HTML Parsing - 여기서 주의할점은 CSS는 Parsing 차단 리소스가 아닌 Render 차단 리소스이기 때문에 Dom 생성만 중지한다.
Critical Rendering Path
브라우저가 처음 화면을 그리기까지 거치는 핵심 단계들을 말하며, 이를 최적화하면 FCP (First Contentful Paint) 같은 성능 지표가 개선된다. 주요 단계로는 HTML 파싱 → CSSOM 생성 → JS 실행 → Render Tree 생성 → Layout → Paint 순서가 있다.
Operation
STEP1. Layout
그리고 랜더링 엔진은 Layout 작업을 시작하는데 이것은 Render Tree의 노드들은 화면의 올바른 위치에 표시하는 것을 의미한다.
STEP2. Painting
그리고 UI Backend가 Render Tree의 노드들을 돌면서 UI를 그린다.
STEP3. Composition
마지막으로 노드들의 레이어를 순서대로 구성하는 Compostion 단계이다. z-index가 낮은 요소를 먼저 놓고 그 다음에 높은 요소를 놓는 것이다.
부연 설명
이러한 Parsing과 Layout(배치) 그리고 UI를 그리는 작업은 서버로부터 모든 데이터를 받고 나서 시작하지 않는다. 브라우저는 사용자에게 더 빠른 화면을 출력해주기 위해 서버로부터 데이터를 일부를 받고 나서 화면에 표시하고 또 데이터를 받게 되면 화면에 표시하는 것을 반복한다. 이 때문에 웹 페이지의 화면이 한 번에 뜨지 않고 부분적으로 뜨는 현상이 나타나는 것이다.
마무리
웹 브라우저는 단순히 서버로부터 데이터를 받아오는 도구가 아니라, 수많은 내부 동작을 수행하는 복잡하고 정교한 프로그램이다.
DNS 요청부터 시작해 TCP 연결, HTTP 통신, HTML/CSS/JS 파싱, 그리고 최종적으로 사용자에게 시각적으로 보이는 결과를 그리는 데까지 수많은 과정을 거친다.
이러한 원리를 이해하면 웹 최적화, 성능 개선, 그리고 웹 보안에 대한 깊이 있는 이해로 확장할 수 있다. 프론트엔드 개발자뿐 아니라 백엔드, DevOps, 보안 전문가에게도 유용한 기초 지식이므로 꼭 한 번쯤 자세히 짚고 넘어가면 좋다.
웹 성능을 높이고 싶다면, 브라우저가 화면을 어떻게 만드는지부터 이해하자.
Reference
https://aws.amazon.com/ko/route53/what-is-dns/
https://all-young.tistory.com/21
https://ddangjiwon.tistory.com/138
https://bbangson.tistory.com/87
'CS 지식' 카테고리의 다른 글
| [CS 지식6.] HTTP 메서드(Method)란? / HTTP Status Code (0) | 2023.05.25 |
|---|---|
| [CS 지식5.] 가상화란? (2) | 2023.03.17 |
| [CS 지식4.] OSI 7계층 & TCP/IP 4계층이란? (0) | 2023.03.07 |
| [CS 지식3.] HTTP / HTTPS 란? (0) | 2023.03.07 |
| [CS 지식2.] DNS의 동작원리(Domain Name System) (0) | 2023.03.01 |