웹 브라우저는 어떻게 동작할까❓

우리가 웹 브라우저를 열고 웹 사이트에 접속을 하면
웹 브라우저 내부에선 어떤 일이 벌어질까❓

🗣먼저 웹 브라우저➡DNS[Domain Name System]에게 물어봄

🌐웹 브라우저 : 안녕🤗 DNS야❗ a.com 이 호스트의 IP 주소 알려줄래❓
🐱‍🏍DNS : 내가 금방 찾아줄게❗ 이 호스트의 IP 주소는 1.1.1.1 이거야

⬇

🌐브라우저는 이 IP 주소에 있는 서버🖥를 찾아감🔍

해당 IP 서버로 레GO🚀

이때 랜덤한 숫자를 적은 번호표를 갖고 감

🌐웹 브라우저 : 안녕🤗 서버야, 여기 내가 만든 번호표 받아❗
🖥서버 : 번호표에 1을 더해서 너한테 줄게 (0158)

🌐웹 브라우저 : OK. 나도 여기에 1을 더해서 너한테 줄게 (0159)
🖥서버 : (0160)

🤝 3 Way-Handshake

이 둘은 서로 번호표 주고 받으면서
데이터를 주고 받기 위한 3 Way-Handshake 완료한 것🔥
👉 이 과정이 끝나면 브라우저➡서버에게 자료를 요청📢

🌐웹 브라우저 : www.a.com 이 주소에 있는 데이터 좀 보내줄래❓

🖥서버 : (ing) 여기 데이터 받아❗

📢HTTP 요청(Request)

브라우저➡서버에게 데이터 요청✅

🙆‍♀️HTTP 응답(Response)

서버가 데이터를 보내준 것✅

🌐 웹 브라우저 : 이제 데이터 받았으니까
사용자가 이해할 수 있도록 예쁘게 그려줘야지👩‍🎨

🐜이제 브라우저는 사용자에게 데이터 출력할 일만 남았음

✋그러기 전에 브라우저는 서버로부터 받은 데이터를 해석해야함

대부분의 브라우저는 웹 표준화 기구인
W3C의 명세에 따라 HTML & CSS를 해석함

🌳HTML 파싱하여 Dom Tree 생성

먼저 브라우저의 렌더링 엔진
👉 HTML 파싱하여 DOM Tree 생성🎇

🌐웹 브라우저 : HTML 해석 해볼까❓
👉 HTML 파싱📑➡DOM Tree🌳

이때 렌더링 엔진이 스타일 태그 만난다면

✋Stop HTML Parsing

HTML 파싱 작업 중지하고
CSS 파싱 작업 시작하여 CSSOM Tree 생성🎇

🎨CSS Parsing
➡CSSOM Tree🌲 만들기

CSS Parsing 마치면
조금 전에 HTML Parsing 중단된 시점부터 다시 파싱을 시작

그러다 스크립트 태그 만나면

다시 파싱 작업 중지하고

이번엔 JS 엔진에게 제어 권한을 넘김JS 엔진은 코드 해석하여

추상 구문 Tree인 AST 만들고 실행함

그 다음으로 아까 중단했던 HTML 파싱 작업을 완료 함✨

그리고 🌐브라우저➡DOM & CSSOM Tree 합쳐서 Render Tree 생성🎇

Render Tree 생성하는 과정까지➡'Construction'이라고 함

그리고 렌더링 엔진은 Layout 작업을 시작❗

👉 🎄Render Tree의 노드들을 화면에 올바른 위치에 표시하는 것을 의미

그 다음 'UI Backend'가 Render Tree의 노드들을 돌면서 UI를 그림

노드들의 레이어를 순서대로 구성하는 'Composition' 단계❗

z-index가 낮은 요소를 먼저 놓고 높은 요소를 놓는 것

Layout 작업~Composition까지의 과정➡'Operation'

이러한 파싱과 배치(Layout) 그리고 UI 그리는 과정은
서버로부터 모든 데이터를 받고 나서 시작하지 않음🙅‍♀️

🌐브라우저➡👤사용자에게 더 빠르게 화면 출력해주기 위해
서버로부터 데이터의 일부 받고 나서 화면에 표시하고
또 데이터 받게 되면 화면에 표시하는 것을 반복🔄

👉 웹 페이지의 화면이 한 번에 뜨지 않고
부분적으로 뜨는 현상 일어나는 것💡