브라우저의 기본 구조
- 사용자 인터페이스
요청하는 페이지를 제외한 모든 UI를 의미한다.
주소 표시줄, 뒤로 가기, 북마크 등.과 같은 UI가 있다. - 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 중개자 역할을 한다.
예를 들어 사용자 인터페이스의 새로고침 버튼을 눌렀을 경우, 브라우저 엔진은 이를 이해하고 새로고침 명령을 수행한다. - 렌더링 엔진
HTML CSS, JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 한다.
각 브라우저는 다양한 엔진을 사용하지만 크롬은Opera를 사용한다. - 네트워크 레이어 (통신)
HTTP나 HTTPS 같은 프로토콜을 이용해 외부의 리소스를 얻어오고, 서버에 요청을 보낼 때 사용하는 레이어
이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다. - UI 백엔드
브라우저가 동작하고 있는 OS의 인터페이스를 따르는 UI들을 처리한다.Combo Box와alert같은 기본적인 UI들을 처리함.
OS 사용자 인터페이스 체계를 사용해 OS별로 UI들이 다르게 동작하는 것을 확인할 수 있다. - 자바스크립트 인터프리터
자바스크립트 코드를 해석하고 실행하는 역할을 한다.
많이 사용되는 엔진으로는 구글에 V8이 있다. - 자료 저장소
자료를 저장하는 계층으로 브라우저 자체에서 하드디스크와 같이 데이터를 로컬에 저장하기 위한 계층이다.
쿠키나 로컬 스토리지, 세션, 파일 시스템 등에 접근하고 데이터를 저장하는데 사용된다.
브라우저 동작 과정
- 네트워크 통신을 통해 HTML, CSS, JavaScript, 이미지 등 렌더링에 필요한 리소스를 요청하고 응답받는다.
- 서버로부터 받은 HTML 파일을 파싱하고 DOM 트리를 생성하고, CSS 파일이나 <style> 태그를 파싱하여 CSSOM 트리를 생성한다.
- 생성된 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 받은 JavaScript를 파싱한다. 이때 DOM AP를 통해 DOM트리나 CSSOM 트리를 변경할 수 있고 변경됐을 경우 다시 렌더 트리로 결합된다.
- 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산(리플로우)하고, 각 요소를 리플로우된 레이아웃에 맞춰 각 요소를 화면에 그린다(페인팅).
- JavaScript가 DOM을 수정할 경우, 브라우저는 필요한 부분을 다시 계산하고 렌더링한다. (리플로우 및 리페인트)
요약
- HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드한다.
- DOM 및 CSSOM을 결합하여 렌더 트리를 형성한다.
- 렌더 트리에서 레이아웃을 실행하여 각 노드의 구조를 계산한다.
- 개별 노드를 화면에 페인트한다.
출처
감자