웹브라우저를 열고 웹사이트에 접속하면?

1. 웹브라우저 -> DNS에 호스트의 IP주소를 요청하고 받는다.

2. 3 way-Handshake를 통해 서버와 데이터를 주고받기 위한 준비를 한다.

3. 브라우저는 서버에 req을 요청(데이터 요청) - Http req 그리고 서버는 Http res로 데이터를 보내줌

4. 브라우저는 사용자에게 데이터를 출력시켜줌 (W3C의 명세에 따라 데이터를 해석(Parsing)

HTML Parsing (DOM Tree 생성) -> 그러다가 css 만나면 잠깐 html parsing 스탑 CSS parsing (CSSOM Tree 생성) 이 끝나면 다시 Html parsing -> script을 만나면 js 엔진에게 Parsing 요청 (AST를 만들고 실행함)

5. Dom tree 와 cssom tree을 합쳐서 Render Tree을 생성 - > 5번의 과정을 Construction 이라고한다.

6. Layout -> render tree 노드 값을 화면의 올바른 위치에 표현하는 작업

7. Paint -> Ui 백엔드가 render tree 노드 값을 돌면서 Ui를 그린다.

8. Composition -> 노드들의 layer을 순서대로 구성

Operation작업 = 5 + 6 + 7 + 8 까지의 작업을 operation 작업이라고 한다.

parsing 과 ui를 그리는 작업은 유저에게 빠른 화면을 보여주기 위해 서버로 부터 데이터의 일부를 받으면서 계속 적으로 렌더링 합니다.