브라우저의 렌더링 동작 과정

1. 클라이언트에서 웹페이지에 접근하면 해당 서버에 GET요청을 보내게 된다.
   1. 클라이언트에서 요청한 URI를 DNS를 통해 IP 주소로 변환하고 해당 IP를 가진 서버에 GET요청을 보내게 된다.
2. HTML 마크업을 바탕으로 DOM TREE를 생성한다.(바이트 > 문자 > 토큰 > 노드 > DOM)
   1. 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(ex UTF-8)에 따라 개별 문자로 변환
   2. 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환합니다.
   3. 각 토큰들을 객체로 변환하여 노드를 생성한다.
   4. HTML마크업을 바탕으로 DOM TREE를 생성한다.
      1. DOM? HTML, XML문서의 각 요소들을 구조적으로 표현한 트리구조

3. CSS 마크업을 바탕으로 CSSOM 트리를 생성한다.
   1. (바이트 > 문자 >토큰 > 노드 > CSSOM) HTML데이터랑 마찬가지로 파싱
4. DOM TREE와 CSSOM트리를 결합하여 RENDER TREE를 형성한다.
5. 자바스크립트 엔진은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree: 추상적 구문 트리)를 생성한다. 이때 DOM API로 DOM, CSSOM을 변경할 수 있다. 변경된 DOM, CSSOM은 다시 렌더트리로 결합된다.
   1. 렌더링 엔진은 HTML을 한줄씩 순차적으로 파싱하면서 css, javascript 를 만나면 dom생성을 일시 중단하고 해당 작업을 파싱한 후 다시 dom생성을 재개하면서 진행된다.
   2. 다시 결합된 렌더트리를 기반으로 6,7번 순서를 진행한다.
6. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산한다.
7. HTML 요소를 화면에 페인팅 한다.