웹 브라우저는 어떻게 작동 될까?

• 사용자가 브라우저에 주소를 쳐서(도메인) 웹사이트에 접속
• DNS(Domain Name System)에 접속하여 이 호스트의 IP주소를 찾아냄
  • DNS는 브라우저가 인터넷 리소스를 로드할 수 있도록 도메인 이름을 IP 주소로 변환
  • 인터넷의 전화번호부! 
• 브라우저는 IP주소에 해당되는 서버를 찾아감
• TCP/IP(Transmission control protocol/Internet protocol)로 접속함
• 이때 랜덤한 숫자를 적은 번호표Random Sequence를 가지고 감
• 서버에 이 번호표를 건내줌
• 3 Way-Handshake

 

 

• HTTP 요청

브라우저 -> 서버 : 주소에 있는 데이터 요청 (HTTP Request)

서버->브라우저: 데이터를 보내줌 (HTTP Response)

브라우저: 사용자에게 데이터 출력을 위해 '해석'

W3C 명세(웹 표준)에 따라 HTML과 CSS를 해석(Parsing)

브라우저의 렌더링 엔진 파싱 과정

 

[Construction]

1. HTML을 Parsing하여 DOM Tree를 생성

2. style태그에서 CSS Parsing을 하여 CSSOM Tree를 생성

3. script태그를 만나면 Javascript 엔진에게 제어 권한을 넘김

4. 자바스크립트 엔진이 추상 구문 Tree인 AST를 만들고 실행(Abstract Syntac Tree)

5. DOM Tree + CSSOM Tree = Render Tree 생성

[Operation]

Layout

-Render Tree의 노드들을 화면의 올바른 위치에 표시

-UI백엔드가 Render Tree의 노드를 둘면서 UI를 그림

 

Composition

노드들의 레이어를 순서대로 구성함

z-index가 낮은 요소를 먼저 놓고, 그 다음 높은 요소를 놓음

 

*이 과정이 서버에서 모든 데이터를 받은 후에 시작하는게 아닌 데이터의 일부를 받고, 화면에 표시하는 것을 반복

이 때문에 웹 페이제 화면에 한번에 뜨지 않고, 부분적으로 뜨게됨

 

 

 

 

 

 

참고)

웹 브라우저의 동작 순서(6분 순삭)

How do Web Browsers Work?

Web Browsers : What is Web Browser

웹 브라우저의 기본 원리

The Render Tree - Website Performance Optimization

 

더 읽어보면 좋을 거리)

네이버D2 | 브라우저는 어떻게 동작하는가?

요즘IT | 프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정