- 브라우저 렌더링 과정 학습은 React Virtual DOM과 같은 프론트엔드 기술의 등장 배경 및 원리를 이해하고, 트러블슈팅 및 성능 개선을 위한 접근법을 제공하는 핵심 배경 지식입니다. 💡
- 브라우저 렌더링 과정은 HTML 파싱, CSS 파싱, 스타일 계산, 렌더 트리 생성 및 레이아웃, 페인트 및 래스터화, 합성의 총 6단계로 추상화됩니다. 🏗️
- HTML 파싱 단계에서는 HTML 코드를 DOM 트리로 변환하며,
script태그는 DOM 구조 변경 가능성 때문에 파싱을 중단하고 우선적으로 다운로드됩니다. 📄 - CSS 파싱 단계에서는 CSS 코드를 CSSOM 트리로 변환하여 요소에 적용될 스타일 규칙들을 구조화합니다. 🎨
- 스타일 계산(Style Computing) 단계에서는 DOM 트리와 CSSOM 트리를 매칭하여 각 노드의 최종 스타일을 확정하고, 이를 계산된 스타일 객체로 생성합니다. 📐
- 렌더 트리 생성 단계에서는 DOM 트리와 계산된 스타일 객체를 조합하여 화면에 실제로 보여질 요소들만 포함하는 렌더 트리를 구성하며,
display: none과 같은 요소는 제외됩니다. 🌳 - 레이아웃(Layout) 단계에서는 렌더 트리를 기반으로 각 노드의 너비, 높이, 위치를 결정하여 화면에 표시될 상자의 크기를 확정합니다. 📏
- 페인트 및 래스터화 단계에서는 렌더 트리를 순회하며 페인팅 정보(페인트 레코드)를 생성하고, 이를 레이어로 묶어 픽셀로 변환하여 화면에 그릴 준비를 합니다. 🖌️
- 합성(Compositing) 단계에서는 생성된 여러 레이어들을 z-index 및 위치를 고려하여 최종적으로 조합하고 합성하여 사용자에게 보이는 최종 화면을 렌더링합니다. ✨
Recommanded Videos
