<TIL 20.10.17> 브라우저 렌더링

렌더링 과정

1. DOM 트리 생성

브라우저는 HTML 태그를 파싱해 DOM 트리를 구성한다.

 

2. 스타일 구조체생성

스타일 정보를 통해 스타일 구조체(Style Struct) 를 생성한다.

 

3. 렌더 트리 생성

DOM 트리와 스타일 구조를 통해 렌더 트리를 생성한다.

 

4. 레이아웃 처리 (리플로우)

렌더 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해준다.

 

5. 페인트

페인트 이벤트를 발생시켜 렌더 트리를 화면에 그린다.

 

 

* 모든 HTML 을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 진행하기에, 웹페이지에 접속했을 때 페이지가 한번에 뜨지 않고 화면에 점차적으로 그려진다.