서버가 응답을 보내면 브라우저가 그걸 받아서 화면에 그리는 과정이에요.
이 단계가 사실 가장 프론트엔드와 직접적으로 연결돼요.
먼저 응답 구조부터 보고, 렌더링 파이프라인으로 넘어갈게요.
응답 구조:
상태줄의 숫자가 결과를 요약해줍니다.
200은 성공, 301/302는 다른 URL로 이동, 404는 없는 페이지, 500은 서버 에러
Cache-Control 헤더는 브라우저가 이 응답을 얼마나 캐싱할지 결정해요. 프론트엔드 성능 최적화에서 자주 건드리는 헤더예요.
렌더링 파이프라인:
HTML 파싱 → DOM — 브라우저가 HTML을 위에서 아래로 읽으면서 태그를 트리 구조로 변환해요.
브라우저가 서버에서 HTML을 받으면, 이 문자열을 그대로 쓸 수 없어요. JS로 조작하고 CSS를 입히려면 트리 구조로 변환해야 해요. 이 과정이 파싱이에요.
파싱 5단계:
① 바이트 수신 — 서버에서 HTML이 바이트(0101...)로 날아와요.
② 문자 변환 — Content-Type: charset=UTF-8 같은 인코딩 정보를 보고 바이트를 사람이 읽을 수 있는 문자열로 변환해요.
③ 토큰화 — 문자열을 <html>, </div>, "텍스트" 같은 의미 단위(토큰)로 잘라요. HTML 스펙에 정의된 규칙대로 파서가 문자를 하나씩 읽으면서 분류해요.
④ 노드 생성 — 토큰 하나하나를 객체(노드)로 만들어요. 요소 노드(<h1>), 텍스트 노드("Hello"), 주석 노드(<!-- -->) 등 종류가 있어요.
⑤ DOM 트리 완성 — 노드들을 부모-자식 관계로 연결해서 트리를 만들어요. 이게 JS에서 document.querySelector()로 접근하는 그 DOM이에요.
프론트엔드 개발에서 실제로 연결되는 포인트:
script 태그 위치가 성능에 영향을 주는 이유가 바로 ③~④ 단계에서 파싱이 멈추기 때문이에요.
Vue/React 앱에서 번들 스크립트를 <body> 맨 아래나 defer로 넣는 게 이 때문이에요.
innerHTML로 DOM을 바꾸면 해당 부분을 다시 파싱해서 노드를 새로 만들어요.
그래서 루프 안에서 innerHTML 남발하면 느려져요. DocumentFragment나 createElement가 더 효율적인 이유예요.
Vue의 Virtual DOM도 이 실제 DOM 트리를 직접 건드리는 비용을 줄이기 위한 구조예요. 변경사항을 메모리상의 가상 트리에서 먼저 계산하고, 최소한의 실제 DOM 조작만 하는 거예요.
여기서 <script> 태그를 만나면 파싱을 멈추고 JS를 먼저 실행해요. -> 이게 렌더링 블로킹
CSS 파싱 → CSSOM — CSS도 별도로 파싱해서 스타일 트리를 만들어요. CSS가 다 로드되기 전까지는 렌더 트리를 못 만들어요.
렌더 트리 — DOM + CSSOM을 합쳐서 실제로 화면에 보일 요소들만 추려요. display: none 요소는 여기서 제외돼요.
레이아웃 (Reflow) — 각 요소의 정확한 위치와 크기를 계산해요. JS로 DOM을 자주 건드리면 이 단계가 반복 실행되면서 성능이 떨어져요.
페인트 + 합성 — 계산된 레이아웃대로 실제 픽셀을 그려요. GPU를 활용하는 합성(Composite) 단계까지 끝나면 드디어 화면에 보여요.
defer와 async의 차이가 바로 이 렌더링 파이프라인에서 나와요.
defer는 HTML 파싱 완료 후 실행, async는 로드되는 즉시 파싱 중단하고 실행이에요.
Vue.js나 React 번들 스크립트에 defer를 붙이는 이유가 여기 있어요.
전체 흐름 정리
URL 입력
→ DNS로 IP 조회 (캐시 계층적 확인)
→ TCP 3-way handshake (연결 수립)
→ TLS handshake (암호화 채널, HTTPS)
→ HTTP 요청 전송 (메서드 + 헤더 + 바디)
→ 서버 응답 수신 (상태코드 + 헤더 + 바디)
→ 브라우저 렌더링 (DOM → CSSOM → 렌더트리 → 레이아웃 → 페인트)
'Front-End > 네트워크(브라우저)' 카테고리의 다른 글
| 5.2 랜더트리 (0) | 2026.04.01 |
|---|---|
| 5.1 DOM (0) | 2026.04.01 |
| 4. HTTP 요청 — 실제 데이터를 주고받는 규칙 (0) | 2026.03.31 |
| 3-1. TLS 1.2, TLS1.3 차이 (0) | 2026.03.31 |
| 3. TLS handshake — HTTPS 암호화 연결 (0) | 2026.03.31 |