1. 브라우저 주소창에 www.google.com을 입력하면?

• 브라우저가 입력된 구글 주소를 DNS(Domain Name System)에게 전달

• DNS는 해당 구글 주소와 매칭되는 IP 주소를 반환

• 브라우저는 반환 받은 IP 주소를 가지고 서버로 감

• 3-way-handshake 발생: 브라우저와 서버가 서로 접속 요청을 하고, 각자 받은 요청을 수락

  ⇒ 서로 간에 HTTP 통신이 가능해져 이후 데이터를 주고받을 수 있게 됨

2. 브라우저 렌더링 과정

• HTML을 파싱하여 DOM 트리를 생성한다.
• DOM 트리를 생성하던 도중에 <style> 태그를 만나면 HTML 파싱 작업을 중단하고 CSS를 파싱하여 CSSOM 트리를 생성한다.
• CSSOM 트리를 만들면 중단되었던 HTML 파싱을 다시 시작한다.
• 도중에 <script> 태그를 만나면 ****다시 HTML 파싱을 멈추고 자바스크립트 코드를 파싱하고 실행까지 ****한다.
• 이후에 HTML 파싱을 마저 진행하여 DOM 트리를 완성한다.
• DOM 트리와 CSSOM 트리를 합쳐 Render 트리를 생성한다.
• Layout 단계에서 Render 트리의 노드들을 화면의 올바른 위치에 배치시킨다.
• Paint 단계에서 Layout 단계에서 배치된 노드들을 그려낸다.
• Composition 단계에서 z-index에 따라 노드를 앞뒤로 배치시켜서 최종 화면을 완성한다.

3. Reflow와 Repaint

Reflow