[Browser] 브라우저 렌더링 원리

- 브라우저 렌더링 : HTML, CSS, JS 등 웹페이지 자원을 브라우저가 화면에 그리는 과정

- 순서

 

1. DOM 생성

 1-1. HTML 파싱 및 DOM 트리 생성

 1-2. HTML 태그를 Node 로 변환 및 계층 관계 생성

2. CSSOM 생성

 2-1. CSS 파싱 및 CSS 트리 생성

 2-2. CSS 속성 노드 변환 및 계층 관계 생성

3. DOM 트리와 CSSOM 트리를 결합하여 렌더트리 생성

4. 레이아웃

5. 페인팅

6. JS 결합