브라우저 구조 및 렌더링 엔진 작동 원리
웹 브라우저는 단순히 HTML을 보여주는 도구가 아니라 복잡한 소프트웨어로 구성되어 있다.
브라우저는 여러 핵심 컴포넌트가 상호하며 웹페이지를 렌더링한다.
브라우저의 주요 구성 요소
브라우저는 다음과 같은 핵심 컴포넌트로 구성된다.
1. User Interface (UI)
- 사용자가 보는 브라우저의 화면 요소
- 주소창, 이전/다음 버튼, 북마크, 메뉴 등
2. Browser Engine(브라우저 엔진)
- UI와 렌더링 엔진 간의 중재자 역할
- 사용자의 요청을 렌더링 엔진에 전달하고 결과를 다시 UI에 표시한다.
3. Rendering Engine(렌더링 엔진)
- HTML, CSS, JavaScript 등을 해석해 화면에 표시하는 핵심 엔진
- 브라우저에 따라 렌더링 엔진이 다름
Blink - 크롬, 엣지
Webkit - 사파리
Gecko - 파이어폭스
4 Networking(네트워킹)
- HTTP/HTTPS 프로토콜을 통해 서버에서 리소스를 가져오는 모듈
- 브라우저 캐시와 프록시 설정을 관리한다.
5. JavaScript Engine(자바스크립트 엔진)
- 자바스크립트 코드를 해석하고 실행한다.
- 유명한 자바스크립트 엔진:
V8(크롬, 엣지)
SpiderMonkey(파이어폭스)
JavaScriptCore(사파리)
6. Data Storage(데이터 저장소)
- 쿠키, IndexedDB, WebSQL, LocalStorage, Cache Storage 등을 관리한다.
7. UI Backend(UI 백앤드)
- 브라우저 UI 렌더링을 처리한다.
- 버튼, 선택 창 등 네이티브 인터페이스 요소를 그리는 역할을 한다.
브라우저 렌더링 과정
렌더링 핵심 과정은 다음과 같다.
1. HTML 파싱
- HTML 문서를 파싱해 DOM(Document Object Model) 생성
- DOM은 HTML의 계층 구조를 객체 모델로 표현한 구조이다.
2. CSS 파싱
- CSS 파일은 CSSOM(CSS Object Model)트리로 변환된다.
3. Render Tree 생성
- DOM과 CSSOM을 결합하여 Render Tree 생성
- display: none 과 같이 표시되지 않는 요소는 제외된다.
4. Layout(Reflow)
- Render Tree를 기반으로 각 요소의 정확한 위치와 크기를 계산한다.
- 화면 크기, 뷰포트, 글자 크기 등 다양한 요소를 고려한다.
5. Paint(페인트)
- Layout 단계에서 결정된 위치 및 스타일 정보를 이용해 픽셀 단위로 화면에 그린다.
6. Composite(합성)
- Paint 단계에서 생성된 여러 레이어(Layer)를 GPU를 통해 합성한다.
- 레이어: 스크롤, 애니메이션과 같은 복잡한 장면을 부드럽게 처리하기 위해 사용된다.
최적화
1. CSS 상단 배치
- CSS는 렌더링 차단 리소스이므로 상단에 배치해야 빠르게 화면을 표시할 수 있다.
2. JavaScript 하단 배치(또는 async/defer 사용)
- JavaScript는 DOM 파싱을 차단하므로 지연로드가 권장된다.
3. 이미지 최적화
- srcset, lazy loading 등을 통해 이미지를 최적화한다.
4. Critical Path Resource(CPR) 관리
- 중요한 CSS, JavaScript는 인라인(inline)으로 삽입하여 로드 속도를 높인다.
* Critical Path Resource: 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계
5. 레이아웃 변화 최소화
- position, transform, opacity 등만 변경하는 것이 효율적이다.
요약
브라우저 구조는 UI, 브라우저 엔진, 렌더링 엔진, 네트워크 모듈, JavaScript 엔진 등으로 구성되어있다.
렌더링 엔진의 핵심 프로세스는 HTML 파싱 → CSS 파싱 → Render Tree 생성 → Layout → Paint → Composite 순서로 진행되고 CRP 최적화를 통해 성능을 높이고 사용자 경험을 개선할 수 있다.
이 구조를 이해하면 성능 최적화, 디버깅, 사용자 경험 향상에 큰 도움이 될 것 같다.
