HTML 렌더링 과정 요약

1. Load
   

   네트워크를 통해 마크업을 받아온다.

2. DOM Tree
   

   마크업 문자열을 토큰 형태로 잘라서(Tokenizer) 트리를 구축하고 파싱해 DOM Tree 생성

3. Render Tree
   

   위에서 생성한 DOM Tree는 내용을 담당하고 스타일 시트의 스타일 규칙을 결합해 Render Tree를 구축한다. DOM Tree에는 있지만 화면에는 보이면 안되는 요소들을 필터링한 결과가 Render Tree

4. Layout
   

   위에서 노드의 콘텐츠 및 스타일 적용만 했지 실제로 어디에 배치되는지에 대한 계산은 아직 하지 않았다. 이제 Render Tree의 루트부터 순회하며 위치와 크기를 조정한다.

5. Paint
   

   이제 개별 노드를 화면에 표시, 사용자가 화면을 보기 시작하는 부분