웹페이지가 브라우저에 렌더링 되는 과정

1. html 파싱 -> dom트리 생성

주소의 서버가 html 파일을 브라우저로 전송하게 됨

이 html 코드는 8비트의 데이터 형태로 전송됨 

전송받은 바이트 데이터를 문자로 변환함

작은 노드들(head, body 태그,,)이 모여 하나의 Dom 트리가 됨

2. CSS 파싱 -> CSSOM 트리 생성

브라우저에서 전달받은 CSS파일을 문자로 변환함

3. Layout

요소의 크기나, 위치들을 토대로 레이아웃 트리 생성

Dom 트리와 CSSOM 트리를 하나로 합친 모습

예를 들어, display:none 과 같은 경우 렌더트리에 포함되지 않음

4. 페인트

텍스트, 색, 그림자 등 시각적인 모습들을 그리게 됨

5. Composite

페인트 단계에서 만든 레이어를 화면에 픽셀로 표현함

나뉘어져있던 레이어를 합쳐서 페이지로 완성함