[CS 지식] 웹 브라우저 동작 원리

──────────────────── CALL ───────────────────── 

1. 사용자 웹브라우저 URL 호출

───────────────────── DNS ───────────────────── 

1. DNS 방문
2. DNS가 알려준 해당 아이피 주소로 이동 

──────────────── 3 Ways Handshake  ───────────────── 

1. 웹브라우저가 서버에 임의의 값을 건네준다
2. 서버가 1을 더해 다시 웹브라우저에게 돌려준다
3. 웹브라우저가 다시 1을 더해 웹브라우저에게 돌려준다 (3-ways handshake)

 

────────────── Request & Response ─────────────────

1. 서버에게 데이터 요청 (HTTP Request)
2. 서버가 데이터를 준다 (HTTP Response)

─────────────────── DOM Tree ────────────────────

1. W3C 명세에 따라 HTML과 CSS 해석 (Parsing) → HTML 해석해 DOM Tree 생성
   1. CSS를 찾을 경우 DOM Tree 작업을 일시 중단하고 CSS Parsing 작업을 해 CSSOM Tree 생성
   2. 스크립트(JS)를 찾을 경우 Tree 생성 작업을 일시 중단하고 JS Engine 기동 해 AST(Abstract Syntax Tree) 생성
2. Parsing이 끝나면 CSSOM Tree  + DOM Tree를 합쳐 Render Tree를 생성

────────────────── Rendering────────────────────

1. 랜더링엔진이 Layout 작업 실시 (화면에 그릴 장소 체크) → UI Backend가 Layout 작업이 실시된 곳에 UI를 그린다
2. 레이어의 z-index를 기준으로 위치 재배치 (composition)
3.  

1. 웹 브라우저는 모든 데이터를 다 Parsing한 후에 이루어지는 것이 아니라 중간 중간에 그리고 화면에 표시한다

 

 

🔗 참고 및 출처

https://www.youtube.com/watch?v=FQHNg9gCWpg