브라우저의 기본 구조
1. 사용자 인터페이스
- 사용자가 접근할 수 있는 영역
- URI를 입력할 수 있는 주소 표시줄, 뒤로가기 버튼 등 페이지를 보여주는 창을 제외한 나머지 부분
2. 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
3. 렌더링 엔진
- 렌더링 엔진에서 요청한 콘텐츠를 표시하는데 HTML를 요청하면 HTML과 CSS를 파싱하여 화면에 표시
4. 통신
- HTTP 요청과 같은 네트워크 호출에 사용
- 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행
5. UI 백엔드
- 플랫폼에서 명시하지 않은 일반적인 인터페이스, OS 사용자 인터페이스 체계 사용
6. 자바스크립트 파서
- 자바스크립트 코드를 해석하고 실행
7. 자료 저장소
- cookie, local storage 등 local에 data를 저장하는 영역
렌더링 엔진
렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시한다.
HTML 및 XML 문서와 이미지 뿐 아니라 PDF, JPG 등 서버에 요청하여 가져올 수 있다.
렌더링 엔진의 대표적인 엔진은 Webkit(크롬, 사파리)과 Gecko(파이어폭스)가 있다.
렌더링 엔진 동작 과정
렌더링 엔진은 요청한 문서의 내용을 얻는 것으로부터 시작하는데 보통 8KB 단위로 전송된다.
먼저 HTML 문서를 파싱하고 태그를 DOM 트리의 각 DOM 노드로 변환한다.
그 다음 외부 CSS 파일과 함께 포함된 스타일 데이터들로 렌더트리를 만든다.
렌더 트리 생성이 끝나면 배치가 시작되는데 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.
렌더링 엔진은 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.
