"HTML 코드 한 줄이 실제 화면에 보이기까지, 브라우저 안에서는 수많은 일들이 일어난다."
웹 개발을 하면서 가장 많이 다루지만, 가장 잘 모를 수 있는 영역이 바로 브라우저 렌더링입니다.
렌더링 과정을 제대로 이해하면:
- 레이아웃이 깨지는 이유
- 느린 페이지의 원인
- 효율적인 최적화 방법
등을 깊이 이해하고 실전 코드 품질을 한층 끌어올릴 수 있습니다.
브라우저 렌더링이란?
브라우저 렌더링(Rendering)은,
HTML, CSS, JavaScript 등의 리소스를 가져와서
사용자가 볼 수 있는 화면(UI)으로 변환하는 전체 과정을 말합니다.
간단히:
코드 → 구조(구조화) → 스타일(디자인) → 위치(배치) → 픽셀(화면 표시)
브라우저 렌더링 전체 흐름 요약
1. HTML 파싱 → DOM 트리 생성
2. CSS 파싱 → CSSOM 트리 생성
3. DOM + CSSOM → 렌더 트리(Render Tree) 생성
4. 렌더 트리 기반 → 레이아웃(Layout)
5. 레이아웃 결과 기반 → 페인팅(Painting)
6. GPU 처리 → 최종 화면 표시(Compositing)한 문장으로 정리하면:
브라우저는 DOM과 CSSOM을 만들고, 이를 렌더 트리로 합쳐 레이아웃하고, 페인팅해서 최종 화면을 그린다.
각 단계 자세히 파헤치기
HTML 파싱 → DOM 트리 생성
- HTML 파일을 토큰(token) 단위로 읽고 파싱(parser)합니다.
- 태그를 하나하나 읽으면서 Document Object Model(DOM) 트리를 만듭니다.
DOM: HTML 문서를 브라우저가 이해하는 트리 형태로 구조화한 것.
중요 개념:
- HTML은 상향식(top-down) 으로 읽어들입니다.
<script>태그를 만나면 파싱이 중단될 수 있습니다. (→ 렌더링 블로킹)
CSS 파싱 → CSSOM 트리 생성
- HTML이
link,style등을 통해 CSS 파일을 불러오면 - CSS 파일 역시 토큰화 → 파싱 → CSSOM (CSS Object Model) 트리를 생성합니다.
CSSOM: 스타일 규칙을 트리 형태로 표현한 객체.
중요 개념:
- CSSOM이 생성되기 전에는 스타일이 확정되지 않아서 화면 표시가 불가능합니다.
DOM + CSSOM → 렌더 트리(Render Tree) 생성
- DOM과 CSSOM을 합쳐서 렌더 트리(Render Tree)를 만듭니다.
- 렌더 트리는 화면에 표시할 요소와 스타일 정보만 포함합니다.
display: none인 요소는 렌더 트리에 아예 포함되지 않습니다.
중요 개념:
- 렌더 트리는 화면 표시 최적화를 위해 불필요한 노드를 제거한 구조입니다.
레이아웃(Layout, Reflow)
- 렌더 트리의 각 노드에 대해 정확한 위치(x, y 좌표)와 크기(width, height)를 계산합니다.
- 이 과정을 Reflow 또는 Layout이라고 부릅니다.
"이 박스는 어디에, 얼마나 크게, 어떻게 배치될까?"
중요 개념:
- 폰트 변경, 크기 조정 등은 레이아웃 과정을 다시 발생시킵니다.
- Reflow 비용이 높기 때문에 최적화가 중요합니다.
페인팅(Painting)
- 레이아웃 정보를 기반으로 픽셀 단위로 실제 화면을 칠합니다(Paint).
- 색상, 글자, 이미지, 그림자, 테두리 등을 캔버스에 그리는 과정입니다.
"이제 실제로 그린다!"
중요 개념:
background-color,box-shadow,border변경은 페인팅만 다시 발생합니다.- 하지만 레이아웃 변경이 동반되면 전체가 다시 그려질 수도 있습니다.
합성(Compositing)
- 복잡한 페이지에서는 다양한 레이어(layer)가 존재합니다.
- 각 레이어를 GPU에서 병합(Compositing)하여 최종 화면을 만듭니다.
GPU 가속
- 스크롤, 애니메이션 성능 향상을 위해 일부 요소는 GPU 레이어로 분리해서 처리합니다.
렌더링 과정 최적화 포인트
| 최적화 항목 | 설명 |
| CSS 최적화 | 필요한 CSS만 불러오기, 작은 CSS 파일 만들기 |
| Critical Rendering Path 단축 | 초기 렌더링에 꼭 필요한 리소스만 우선 다운로드 |
| 스크립트 최적화 | <script>를 <body> 끝에 두거나, async, defer 사용 |
| 이미지 최적화 | 적절한 포맷(WebP 등)과 크기로 압축 |
| 최소한의 레이아웃 변경 | 레이아웃 변경(Reflow)을 피하기 |
| GPU 레이어 분리 | will-change CSS 속성으로 GPU 가속 유도 |
렌더링 블로킹이란 무엇인가?
- 렌더링 블로킹(Render-blocking)이란,
특정 리소스가 모두 준비될 때까지 브라우저가 화면 표시를 멈추는 현상입니다.
주로 블로킹하는 것들
- CSS 파일: 전체 CSSOM 완성 전에는 렌더링 불가
script태그: 기본적으로 HTML 파싱을 멈추게 함
해결 방법
- CSS는
media속성으로 지연 로드 - JS는
async또는defer속성 추가
<script src="app.js" defer></script>마무리 요약
| 단계 | 설명 |
| 1. HTML 파싱 | DOM 생성 |
| 2. CSS 파싱 | CSSOM 생성 |
| 3. DOM + CSSOM | 렌더 트리 생성 |
| 4. 레이아웃 | 요소 위치와 크기 계산 |
| 5. 페인팅 | 요소를 픽셀로 칠함 |
| 6. 합성 | 레이어를 조합하여 최종 화면 생성 |
렌더링 최적화는 웹 퍼포먼스 향상의 핵심입니다.
렌더링 과정을 이해하고,
"내 코드가 브라우저에 어떤 부담을 주는지"
항상 염두에 두면서 개발해야 합니다.
728x90