브라우저의 구조
브라우저는 우리가 요청한 자원을 서버에 요청하고 화면에 출력하는 기능을 한다.
브라우저의 주요 구성 요소는 다음과 같다.
- 사용자 인터페이스: 사용자에게 제공하는 브라우저 기본 기능 (주소표시줄, 이전/다음/새로고침 버튼 등)
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
- 렌더링 엔진 : 요청한 콘텐츠 파싱, 출력
- 통신 : 네트워크 통신
- UI 백엔드 : 브라우저의 기본장치를 그릴때 사용.
- 자바스크립트 해석기: 자바스크립트 코드 파싱 및 실행
- 자료 저장소: 쿠키와 같은 데이터 저장소
렌더링 엔진
렌더링 엔진은 사용자의 요청으로 서버로부터 받은 HTML 문서를 화면에 표출하는 역할을 수행한다.
| 브라우저 | 렌더링 엔진 |
|---|---|
| 크롬 | Blink (Webkit 으로부터 파생) |
| 오페라 | Webkit |
| 사파리 | Webkit |
| 파이어폭스 | Gecko |
렌더링 과정
[로딩] -> [파싱] -> [배치] -> [그리기]
- 로딩: 서버로부터 다운받은 CSS, HTML 을 읽어들인다
- 객체모델 생성: 파서는 CSS을 DOM 으로, CSS를 CSSOM 으로 변환한다. (DOM Tree 생성)
- 생성된 DOM, CSSOM을 결합하여 실제 화면에 표출된 노드로만 구성된 Render Tree 생성
- 렌더 배치: Layout 단계라고도 부르며, 이를 거쳐 브라우저의 View port 내 요소들의 위치와 크기를 계산한다. 이 단계에서 크기와 관련된 스타일 값(%, vh, vm) 이 계산되고 픽셀 단위로 변환된다.
- 그리기: Paint 단계라고도 하며 그림자, 색상, 텍스트, 이미지 와같은 것들이 처리되어 브라우저에 그려진다.