브라우저 렌더링 이란
- 웹 페이지의 리소스(HTML, CSS, Javascript)를 분석하여 시각적으로 표시되는 과정
- 브라우저의 Rendering Engine과 Javascript Engine에서 실행
- Rendering Engine : 문서의 구조(HTML)와 스타일(CSS)을 분석하여 화면에 출력하는 역할
- Javascript Engine : 문서의 JS 코드를 분석하고 실행하는 역할
브라우저 렌더링 과정
브라우저 렌더링 과정을 간략히 표현하면 리소스 불러오기 -> 리소스 분석 (parsing) -> 화면 출력 으로 이루어져 있다.
1. 리소스 불러오기
브라우저 렌더링 첫번째 단계는 해당 페이지의 리소스를 불러오는데서 시작한다.
아래는 브라우저가 리소스를 받아오는 과정이다.
- 브라우저 주소창에 URL을 입력되면 먼저 브라우저는 캐시를 확인한다.
- 한번도 방문한 적이 없던 주소라면 브라우저는 DNS 서버에 요청하여 입력된 URL을 호스팅하는 서버의 IP 주소를 찾는다.
- IP 주소를 찾았다면 해당 주소의 서버에 TCP 연결후 HTTP 요청을 보내 원하는 리소스를 받는다.
※ DNS(Domain Name System)
모든 URL은 실제로는 고유한 IP 주소를 기반으로 작동하는데 이 주소는 숫자로 구성되어 있어 사람이 기억하고 사용하기에는 불편함이 있다. 이러한 문제를 해결하기 위해 도메인 이름을 통해 IP 주소를 사람이 이해하기 쉬운 형태로 변환해주는 시스템을 DNS 라고 한다. 예를 들어 사람이 "142.250.206.14" 같은 구글의 IP 주소를 직접 입력하기보다는 "www.google.com" 과 같은 도메인 주소를 사용하는 것이 훨씬 더 편리하다.
※ TCP (Transmission Control Protocol)
안정적이고 신뢰할 수 있는 데이터 전송을 위해 사용되는 프로토콜
HTTP 요청을 위해서는 먼저 브라우저와 서버 간의 TCP 연결을 해야된다.
이때 연결 과정을 3-Way Handshake 라고 부른다.
(1) 클라이언트 -(SYN)-> 서버 : 연결 요청
(2) 서버 -(SYN-ACK)-> 클라이언트 : 연결 요청 확인, 승락
(3) 클라이언트 -(ACK)-> 서버 : 연결 승락 확인
※ HTTP 요청
브라우저와 서버 간에 TCP 연결이 되어있을때 브라우저가 서버에 리소스를 요청할 때 사용한다.
2. 구문분석(pasing) 하여 렌더 트리(Render Tree) 생성하기
다음 단계는 받아온 리소스를 분석(parsing) 하여 화면 출력 시 설계도가 될 렌더 트리를 생성하는 과정이다.
렌더 트리는 DOM Tree와 CSSOM Tree를 결합하여 생성하기에 먼저 HTML과 CSS를 분석하여 DOM Tree와 CSSOM Tree를 생성해주어야 한다.
2-1. DOM Tree 생성
DOM Tree는 HTML 코드를 분석하여 생성되는데 코드를 토큰화 시키고 생성된 토큰을 이용해 트리 구조를 만드는 과정을 거친다.
※ DOM (Document Object Model)
문서 객체 모델로 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
렌더링 엔진은 토큰화를 위해 HTML 코드의 줄바꿈이나 공백을 제거하여 한 줄의 코드로 만든다.
그리고 문자를 하나씩 입력받고 위 그림과 같은 프로세스를 거쳐 토큰을 발행한다.
아래의 코드를 예시로 들어보겠다.
<p>HelloWorld</p>- "<" 입력 (자료 상태 -> 태그 열림 상태)
- "p" 입력 (태그 열림 상태 -> 태그 이름 상태) : 시작 태그 토큰 생성
- ">" 입력 (태그 이름 상태 -> 자료 상태) : 시작 태그 토큰 발행
- "H" 입력 (자료상태 유지) : 문자 토큰 발행
"d" 입력까지 동일하게 문자 토큰이 발행됨으로 생략 - "<" 입력 (자료 상태 -> 태그 열림 상태)
- "/" 입력 (태그 열림 상태 -> 종료 태그 열림 상태) : 종료 태그 토큰 생성
- "p" 입력 (종료 태그 열림 상태 -> 태그 이름 상태)
- ">" 입력 (종료 태그 열림 상태 -> 태그 이름 상태) : 종료 태그 토큰 발행
결과적으로 아래와 같은 토큰들이 생성된다.
- 시작 태그 토큰 : p
- 문자 태그 토큰 : HelloWorld
- 종료 태그 토큰 : p
이제 생성된 토큰들을 트리 구조로 구성하여 DOM Tree를 만들어야 한다.
아래 코드를 예시로 들어보겠다.
<html>
<head>
<title>제목</title>
</head>
<body>
<div>
<input type="text" />
<botton>보내기</botton>
</div>
</body>
</html>
위 코드를 토큰화 했을때 아래 그림과 같은 토큰들이 생성된다.
생성된 토큰들은 일종의 명령어로 발행된 순서대로 트리를 구성하게 된다.
첫번째로 발행된 "시작 태그 토큰 html"이 입력되고 html 노드를 생성한다. 이때 한쌍인 "종료 태그 토큰 html"이 입력되기 전 입력된 토큰들은 자식 노드로 생성된다. 즉 다음 입력되는 "시작 태그 토큰 head"으로 생성된 head 노드는 html 노드의 자식이 된다. 그 다음 입력된 "시작 태그 토큰 title"도 같은 방식으로 head 노드의 자식 노드가 된다. 문자 토근의 경우 자식 노드를 생성할 수 없기에 노드를 만든 뒤 부모 노드로 전이 된다.
이러한 방식으로 노드를 생성하다 보면 아래와 같은 트리 구조를 구성하게 된다.
(이해를 돕기 위해 위 설명한 과정을 동영상으로 만들었으니 "DOM Tree 구축 과정" 영상 참고)
영상에서 스텍에 노드를 담는 부분이 있는데 스텍에 담는 이유는 잘못 작성된 HTML 코드를 보정해주기 위해서 이다.
예를 들어 <div>문자</p> 와 같이 코드를 작성한 경우 <div><p>문자</p></div>로 보정을 해준다.
2-2. CSSOM Tree 생성
CSSOM Tree는 CSS 코드를 분석하여 생성되는데 과정은 DOM Tree 생성 과정과 동일하다.
2-3. Render Tree 생성
생성된 DOM Tree와 CSSOM Tree를 결합하여 렌더 트리(Render Tree)를 생성한다.
2-4. JavaScript 실행
HTML 분석(parsing) 중 Script 태그를 만나면 분석을 중단하고 주도권을 자바스크립트 엔진으로 넘겨 Script 분석을 실행한다.
이때 DOM을 참조하거나 제어하는 Script 코드의 경우 에러가 발생할 수 있으므로 HTML 코드 아래에 Script 태그를 넣어 작성하거나
외부 Script를 import 하여 사용하는 경우 Script 태그 속성 중 하나인 디퍼(defer) 속성을 이용하면 페이지가 모두 로드 된 후에 Script가 실행 되도록 명시할 수 있다.
※ JavaScript Engine
브라우저에서 Script 코드를 분석하고 실행하는 역할을 한다.
메모리 할당을 담당하는 메모리 힙(Memory Heap)과 호출 스택이 쌓이는 콜 스택(Call Stack)으로 이루어져 있다.
자바스크립트 엔진 종류는 다양한데 대표적으로는 구글에서 사용하는 V8이 있다.
※ Memory Heap
메모리 할당을 담당하는 곳으로 코드에서 선언한 변수, 함수, 객체 등 모든 메모리 할당은 여기서 발생한다.
※ Call Stack
코드 실행 시 함수의 호출을 스택 형식으로 저장한다.
코드를 읽어가며 수행할 작업을 아래에서 위로 쌓아올리고 실행 시 위에서부터 아래로 작업을 실행한다.
이 호출 스택이 하나이기에 자바스크립트를 싱글스레드(Single thread) 언어라고 한다.
Script 코드도 분석(parsing)을 통해 배열 형태의 토큰을 생성한 뒤 토큰을 이용하여 추상 구문 트리(Abstract Syntax Tree, AST)를 생성한다. 생성된 추상 구문 트리를 인터프리터에서 바이트코드(Bytecode)로 바꾸어 실행함으로 가 Script 동작한다.
Script 동작이 완료되면 멈추었던 HTML 분석으로 돌아가 프로세스를 재시작한다.
4. Layout 단계
생성된 렌더 트리(Render Tree)를 기반으로 노드들의 위치와 크기를 계산하는 과정이다.
이 과정에서 노드가 화면 어디에 어떤 크기로 위치할 것인지 결정되고 CSS에서 "%"나 "em" 같은 상대적인 단위는 뷰포트에 맞춰 픽셀 단위로 변환된다. 또 요소의 크기나 위치 값이 바뀌거나 브라우저 창의 크기가 변화하는 경우 다시 계산을 해야하기에 레이아웃 과정을 거치게되는데 이 경우를 Reflow 라고 한다.
5. Paint 단계
레이아웃 단계에서 계산된 노드들의 위치와 크기를 기반으로 화면에 출력하는 과정으로 하나의 레이어에 그리는 것이 아닌 노드에 따라 여러 레이어에 나누어 페인팅 된다. 독립적인 레이어를 가지는 노드나 속성으로는 <video>, <canvas>, opacity, z-index 등이 있다.
이 과정도 노드에 변경사항이 생기면 다시 발생되는데 이 경우를 Repaint 라고 한다. 주로 배경 이미지나 색상, 그림자 등 레이아웃의 변화 없이 스타일만 변경되는 경우 발생한다.
6. Composite 단계
마자막 단계는 레이어 합성(Composite) 단계로 이전 단계에서 생성된 레이어들을 합쳐 최종 화면에 보여주는 과정이다.
'Study' 카테고리의 다른 글
| useSyncExternalStore로 외부 상태 안전하게 구독하기 (0) | 2025.07.19 |
|---|---|
| Sorting 알고리즘 (0) | 2025.07.12 |
| Cypress로 테스트 코드 작성하기 (0) | 2025.04.15 |
