브라우저 렌더링 과정
웹사이트에 접속하면 눈앞에 멋진 UI가 펼쳐지죠. 하지만 그 화면이 실제로 만들어지기까지는 수많은 과정이 숨어 있습니다. 브라우저는 HTML, CSS, JS 같은 리소스를 해석하고, DOM과 CSSOM을 만들고, 렌더 트리를 통해 화면에 그려줍니다.
이 글에서는 브라우저가 어떻게 웹 페이지를 렌더링하는지, 전체 과정을 단계별로 정리하고, 성능 최적화 포인트도 함께 소개합니다.
1. 브라우저 렌더링 흐름 요약
HTML 파싱(DOM 생성) → CSS 파싱(CSSOM 생성) → Render Tree 생성 → Layout → Paint → Compositinga. HTML 파싱 → DOM 트리 생성
브라우저는 서버로부터 받은 HTML 문서를 파싱(parser) 하여 DOM(Document Object Model) 트리를 생성합니다.
- DOM은 HTML 구조를 객체로 표현한 트리 형태
- <div>, <p> 같은 태그 하나하나가 DOM 노드가 됨
- 예: <body> <h1> Hello </h1> </body> → body, h1, #text 등의 노드로 구성된 트리
b. CSS 파싱 → CSSOM 트리 생성
브라우저는 <style> 또는 외부 CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성합니다.
- CSSOM은 CSS 규칙을 트리 구조로 만든 것
- DOM과 CSSOM은 렌더 트리 생성을 위해 함께 사용됨
c. 렌더 트리(Render Tree) 생성
DOM + CSSOM을 기반으로 시각적으로 출력할 정보만 포함한 렌더 트리를 생성합니다.
- 렌더 트리는 실제 화면에 그려질 요소들만 포함
- display : none 요소는 렌더 트리에 포함되지 않음
d. 레이아웃 (Layout/Reflow)
렌더 트리 기반으로 각 요소의 크기와 위치를 계산합니다.
- 상대 위치(position, margin, flex, grid 등) 고려
- 화면이 리사이징되거나 DOM 구조가 바뀌면 Reflow(레이아웃 재계산) 발생
e. 페인트(Paint)
계산된 위치에 따라 요소들을 실제로 픽셀 단위로 그립니다.
- 배경 색상, 텍스트, 이미지, 테두리 등 시각적 속성을 렌더링
- 이 과정은 CPU와 GPU 리소스를 많이 소모함
f. 컴포지팅(Compositing)
최종적으로 레이어를 조합하여 화면에 출력합니다.
- 각 요소는 GPU 레이어에 나뉘어 렌더링될 수 있고, 이를 합성(compositing) 하여 최종 화면 생성
- transform, opacity, will-change 같은 속성은 별도 레이어 생성 유도 가능
2. 성능 최적화 포인트
| 최적화 대상 | 설명 |
| Critical Rendering Path 최소화 | 필요한 리소스만 먼저 로드 (preload, async, defer) |
| Reflow/ Repaint 줄이기 | DOM 변경 최소화, 애니메이션은 GPU 속성 사용 |
| Lazy Load 활용 | 이미지, iframe 등 느리게 로딩 |
| 스타일 계산 비용 줄이기 | 중첩 CSS 최소화, 복잡한 선택자 피하기 |
3. 마무리
브라우저의 렌더링 과정은 단순한 일이 아닙니다. HTML과 CSS, JS가 서로 상호작용하며 트리 구조를 만들고, 이를 기반으로 시각적 요소가 그려집니다. 렌더링 과정을 이해하면 성능 최적화의 방향을 명확히 잡을 수 있으며, 웹 개발자로서의 깊이가 확 달라집니다.
함께 보면 좋은 자료
블로그 글 :
[브라우저 동작 원리] 주소창에 URL을 입력하면 무슨 일이 벌어질까?
브라우저 동작 원리 웹 브라우저의 주소창에 https://www.example.com과 같은 URL을 입력했을 때, 그 단순한 동작 뒤에는 수많은 복잡한 일이 일어납니다. 이 과정을 이해하면 HTTP, DNS, 브라우저 렌더링
dachaes-devlogs.tistory.com
[브라우저 렌더링 성능 최적화] 렌더링 지연 최소화 전략
브라우저 렌더링 성능 최적화빠른 웹사이트는 사용자 만족도와 SEO 모두에 긍정적인 영향을 미칩니다. 특히 웹 렌더링 단계에서의 지연(delay)은 최초 로딩 속도와 상호작용 응답성에 큰 영향을
dachaes-devlogs.tistory.com
[Repaint와 Reflow] 브라우저 렌더링 성능을 좌우하는 두 가지 개념
Repaint와 Reflow웹 개발에서 브라우저의 성능은 사용자 경험에 큰 영향을 미칩니다. 특히 CSS를 변경하거나 DOM 구조를 조작할 때, 브라우저 내부에서는 다양한 렌더링 작업이 일어나며, 이 중 Repaint
dachaes-devlogs.tistory.com
'컴퓨터 사이언스 > 브라우저' 카테고리의 다른 글
| [브라우저 동작 원리] 주소창에 URL을 입력하면 무슨 일이 벌어질까? (0) | 2025.04.14 |
|---|---|
| [MutationObserver] DOM 변화를 감지하는 방법 (0) | 2025.04.14 |
| [검색 엔진 최적화 (SEO)] 검색에 잘 노출되는 사이트란? (0) | 2025.04.13 |
| [웹 저장소] localStorage, sessionStorage, Cookie 의 차이와 사용법 (0) | 2025.04.13 |
| [CSR과 SSR] 렌더링 방식의 차이와 선택 기준 (0) | 2025.04.11 |