웹 개발을 하다 보면 HTML, CSS, JavaScript를 작성하는법은 알지만 이것들이 어떤 과정을 거쳐서 화면에 나타나는건지 궁금증이 생깁니다.
오늘은 브라우저가 웹페이지를 화면에 그리는 전체 과정인 브라우저 렌더링 파이프라인에 대해 상세히 알아보겠습니다.
브라우저 렌더링 파이프라인이란?
브라우저가 HTML, CSS, JavaScript 파일을 받아서 사용자가 볼 수 있는 웹페이지로 변환하는 일련의 과정입니다. 이 과정은 아래와 같은 단계로 순차적으로 진행됩니다.
각 단계가 어떤 역할을 하는지 하나씩 살펴보겠습니다.
전체 파이프라인 개요
HTML 파싱 → DOM 트리 → CSSOM 트리 → 렌더 트리 → 레이아웃 → 페인트 → 컴포지트 → 화면 출력
1단계 : HTML 파싱 → DOM 트리 생성
브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model)트리를 생성합니다.
DOM(Document Object Model)트리란?
브라우저가 웹 페이지의 HTML 문서의 구조를 트리 구조의 형태로 변환한 것으로, 각 HTML 태그와 요소, 텍스트 등이 하나의 노드가 되어 부모-자식 관계를 형성합니다.
HTML 파싱 과정의 세부 단계
-
바이트(byte) -> 문자(character)변환
브라우저가 서버로부터HTML파일을 받을 때, 데이터는 바이트(byte) 형태로 전송되며HTTP 헤더나HTML의 meta 태그에서 문자 인코딩 정보를 확인하여 바이트들을 문자로 변환합니다. -
토큰화
문자로 변환된HTML을HTML 토큰으로 변환하는 과정을 거칩니다.
각 토큰은HTML의 구성 요소를 나타냅니다. -
노드 생성
각 토큰을 기반으로 실제 DOM 노드 객체를 생성합니다. 각 노드는 해당HTML요소의 모든 정보와 메서드를 포함합니다. -
DOM 트리 구성
생성된 노드들을HTML의 중첩 구조에 따라 부모-자식 관계로 연결하여 트리를 구성합니다.
HTML 파싱 예시
<!DOCTYPE html>
<html>
<head>
<title>블로그</title>
</head>
<body>
<header>
<h1>안녕하세요</h1>
</header>
<main>
<p>roope97 블로그입니다</p>
</main>
</body>
</html>생성되는 DOM 트리
2단계 : CSS 파싱 → CSSOM 트리 생성
HTML 파싱과 동시에 CSS 파일도 파싱되어 CSSOM(CSS Object Model) 트리를 생성합니다.
CSSOM 트리란?
DOM의 스타일 정보 버전으로, 모든 CSS 규칙을 객체화한 트리 구조입니다.
CSS 예시
body {
font-size: 16px;
color: #333;
}
header {
background-color: blue;
padding: 20px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
p {
margin: 10px 0;
line-height: 1.5;
}생성되는 CSSOM 트리
3단계 : DOM + CSSOM → 렌더 트리(Render Tree)생성
이제 브라우저는 DOM과 CSSOM을 결합하여 렌더트리를 생성하게 됩니다.
렌더 트리란?
렌더 트리(Render Tree)는 DOM 트리와 CSSOM 트리를 결합하여 실제로 화면에 그려질 요소들을 포함한 트리입니다.
렌더 트리의 특징
- 화면에 그려질 요소들만 포함하기 때문에
display: none속성이 있는 요소는 렌더 트리에 포함되지 않습니다. - 각 요소의 최종 계산된 스타일 저장합니다.
- 다음 단계인 레이아웃(Layout) 과정에서 각 요소의 정확한 위치와 크기를 계산하는 기반이 됩니다.
4단계 : 레이아웃(Layout) 계산
렌더 트리가 생성된 후에 브라우저는 렌더 트리를 사용하여 각 요소의 정확한 위치와 크기를 계산하는 레이아웃 과정을 거칩니다.
레이아웃이란?
레이아웃은 렌더 트리의 각 노드가 화면에서 정확히 어느 위치에, 어떤 크기로 배치될지를 계산하는 과정입니다.
만약, 화면 크기를 줄이거나 늘리게 되면 브라우저는 레이아웃 과정을 다시 수행해야 합니다. 이 과정을 흔히 리플로우(Reflow)라고 부르는데, 리플로우는 성능에 영향을 줄 수 있으므로 이를 최소화하는 것이 중요합니다.
5단계 : 페인팅(Paint)
레이아웃이 완료되면 브라우저는 페인팅 작업을 시작합니다.
페인팅이란?
레이아웃에서 계산된 위치와 크기 정보를 바탕으로 실제 픽셀을 그리는 과정입니다. 이 단계에서 색상, 이미지, 텍스트, 그림자 등이 그려집니다.
6단계 : 합성(Compositing)
브라우저는 화면에 그려질 요소들을 각각의 레이어(layer)로 분리하고, 이 레이어들을 결합하여 최종 화면을 구성하게 됩니다.
이 과정에서 각 레이어들은 GPU를 활용해서 더 빠르게 합성합니다.
끝
위와 같은 6단계를 거치게 되면 최종적으로 화면에 우리가 보는 웹페이지가 나타나게 됩니다.평소 아무 생각없던 웹페이지 로딩 과정에 이렇게 많은 단계가 있었다니 신기한거 같습니다. 이 글을 작성하면서 공부하다보니 이 원리를 알고 개발하면 더 효율적이고 성능 좋은 웹사이트를 만들 수 있을 것 같습니다.
