브라우저가 작동하는 방식 — 렌더링 파이프라인의 깊은 탐구
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 개발자 (HTML, CSS, JavaScript의 렌더링 과정 이해를 위한 중급 이상 수준)
- 프론트엔드 개발자 (성능 최적화 및 렌더링 문제 해결을 위한 실무적 지식 필요)
핵심 요약
- 렌더링 파이프라인은 HTML/CSS/JavaScript를 DOM → CSSOM → Render Tree → Layout → Paint → Composite 순서로 처리하여 화면에 렌더링
- JavaScript는
defer또는async속성으로 렌더링 차단을 방지할 수 있음 - 렌더링 과정에서
display: none요소는 Render Tree에 포함되지 않음
섹션별 세부 요약
1. 브라우저의 초기 요청 및 데이터 처리
- 사용자가 URL을 입력하면 브라우저는 원시 바이트를 받음
- UTF-8을 기반으로 문자 인코딩을 수행하여 문자 스트림 생성
- HTML 파서가 문자 스트림을 토큰으로 분할하고, DOM 트리로 변환
2. CSSOM 생성 및 Render Tree 구성
- CSS는 CSSOM으로 파싱되어 DOM과 별도로 처리됨
- DOM과 CSSOM은 Render Tree를 생성하기 위해 병합되며,
display: none요소는 제외됨 - Render Tree는 각 노드의 내용 및 스타일을 포함
3. 레이아웃 계산 및 화면 렌더링
- 레이아웃 단계에서 각 요소의 정확한 위치 및 크기가 계산됨
- Painting 단계에서 레이아웃의 시각적 요소가 픽셀로 변환되며, Composite 단계에서 층별로 합성됨