브라우저 동작 방식

Main Flow

1. HTML 코드를 받고 HTML 파싱을 함 -> DOM Tree라는 계층을 만듬

   • 각각의 DOM Tree는 화면에 어떤 크기와 색깔로 표현 되어야 하기 때문에 CSS 코드가 필요

2. CSS 정보를 받아서 Style Rules를 구성함

3. DOM Tree와 Style Rules를 합치는 작업 -> Attachment

   • 어떤 element에 어떤 style을 부여하는 작업을 함

4. Render Tree를 그림

   • 각각의 DOM Tree별로 어떤 Style 정보를 가지고 있는지 Render Tree를 객체화 시킴 (key와 value로 된 구조로 만듬)
   • Layout 결정 (어디에 배치될지, 크기는 얼마인지)

5. Render Tree와 Layout에 따라서 실제 화면에 Painting