1. 브라우저의 기본구조

• 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
• 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
• 렌더링 엔진 - 요청한 콘텐츠를 표시한다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.
• 통신 - HTTP 요청과 같은 네트워크 호출에 사용된다.
  이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
  
• UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그린다.
  플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
• 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행한다.
• 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

렌더링 엔진

목표 :

• HTML, CSS, JS, 이미지 등 웹 페이지에서 포함된 모든 요소를 화면에 보여준다.
• 업데이트가 필요할 때 효율적으로 렌더링을 할 수 있도록 한다.

1. html 문서를 파싱한다.
2. 한줄한줄 읽으면서 DOM트리를 만들어나간다.
3. 중간에 link태그를 만나 css요청이 발생하면, 요청과 응답과정을 거치고 css를 파싱한다.
4. CSS파싱이 끝나면 중단된 html을 다시읽고 DOM트리를 완성시킨다.
5. 완성된 DOM트리와 CSSOM트리를 합쳐 Render Tree를 만들고 그린다.
6. 중간에 HTML파서는 Script태그를 만나게 되면 javascript 코드를 실행하기 위해 파싱을 중단한다.
7. 제어권한을 자바스크립트 엔진에게 넘기고, 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행한다.