1. 브라우저의 동작
1-1. 브라우저의 기본 구조
- User interface : 사용자가 사용하느 브라우저의 주소표시줄, 홈버튼, 북마크 등의 페이지 이외의 모든 영역
- Browswer Process : User interface 와 Redering Process 사이의 동작을 제어하는 영역
- Redering Process : 표시되는 영역을 모두 제어하는 영역
- Netrworking : HTTP/HTTPS의 네트워크 요청 및 인터넷 통신과 관련되 보안 문제를 처리하는 영역
- JavaScript interpreter : JavaScript 코드를 구문 분석하고 실행하는 영학을 하는 영역
- UI Backend : 기본 운영체제의 사용자 인터페이스를 사용(주로 기본위젯(창이나 콤보상자)등을 그리는데 주로 사용)
- Data Persistence : 영속적 계층이며, 웹 브라우저의 쿠키와 같은 다양한 유형의 데이터를 로컬에 저장을 하는 영역
1-2. 렌더링 엔진의 동작 과정
- HTML과 CSS 파일을 파싱해서 트리 생성
- 두개의 Tree를 결합하여 Render Tree 생성
- Render Tree에서 각 노드의 위치와 크기를 계산
- 화면상에 실제 픽셀로 변환하고 레이어를 생산
- 레이어를 생성하여 실제 화면에 표시
2. HTML Parsing
- 브라우저가 HTML파일을 해석하여 문서의 문자열을 토큰으로 분해하고 해당 토큰에 문법적인 의미와 구조를 반영하여 DOM(Document Object Model)을 생성
3. CSS Parsing
- HTML parsing 중에 CSS가 있으면 CSSOM(CSS Object Model) Tree 생성 또한 같이 생성
4. Render
- 생성된 DOM Tree와 CSSOM Tree를 매칭하여 Render Tree를 구성하고 실제로 화면에 그려질 Tree이다.
5. Layout
- 생성한 Render Tree를 화면에 배치할지에 대해서 위치와 크기를 계산한다.
6. Paint
- Layout 단계에서 계산된 크기 와 값을 이용해서 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.