브라우저의 기본 구조
- 사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. - 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작 제어. - 렌더링 엔진
요청한 콘텐츠 표시. (HTML 요청 시, HTML과 CSS를 파싱하여 화면에 표시)
- HTML 및 XML문서와 이미지 표시.
- 개코 엔진(firefox), 웹킷 엔진(safari, chrome) 존재.
- 파싱(parsing) : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것.
- 렌더링 엔진은 HTML을 파싱하여 DOM트리를 만들고 CSS를 파싱하여 CSSOM트리를 만듦.
- 통신
HTTP요청과 같은 네트워크 호출에 사용됨. - UI백엔드
콤보박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계 사용. - 자바스크립트 해석기
자바스크립트 코드 해석 및 실행. - 자료 저장소
자료를 저장하는 계층. 쿠키를 저장하는 것처럼 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음. HTML5명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
브라우저가 문서(HTML)를 해석하면서 하는 일
- 불러오기
불러오기는 HTTP모듈 또는 파일시스템으로 전달받은 리소스 스트림을 읽는 과정
로더(Loader)가 이 역할을 맡고 있음.
로더는 문서를 읽을 뿐만 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 파일을 다운로드 받을 지를 결정. - 파싱(Parsing)
파싱은 DOM트리를 만드는 과정.
HTML, XML파서가 각각 존재. - 렌더링 트리 만들기
HTML/XML문서의 내용을 트리 형태로 자료구조화.
DOM트리는 내용 자체를 저장하고 있고, 화면에 표시하기 위한 위치, 크기정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조를 렌더링 트리라고 부름. - CSS스타일 결정
HTML문서 내용과 별도로 표현을 나타내기 위해 만들어짐. - 레이아웃
렌더링 트리가 생성될 때, 각 렌더 객체가 위치와 크기를 갖게되는 과정. - 그리기
렌더링 트리를 탐색하면서 특정 메모리 공간에 RGB값을 채우는 과정
출처
배울게 천지