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

Overview

출처 : https://youngkyonyou.github.io/interview/2021/12/23/Interview-interview-09.html

 

오늘은 웹 브라우저의 동작원리에 대해 알아보려고 한다.

 

---

요약 내용

 

1. 사용자가 브라우저로 웹 사이트에 접속(www.a.com)
2. DNS를 통해 서버의 아이피 주소를 파악
3. 브라우저와 서버가 3 Way Handshake
4. 브라우저가 서버에게 HTTP Request(서버에게 데이터 요청)
5. 브라우저가 서버로부터 HTTP Response(서버로부터 데이터를 받음)
6. 서버로부터 받은 데이터에 HTML 파싱하여 Dom Tree 생성
7. Style 태그를 만나면 Dom 생성을 잠깐 중지하고 CSS를 파싱하여 CSSOM Tree 생성
8. 파싱 중간에 스크립트 태그가 나오면 자바스크립트 엔진에게 권한을 넘겨 자바스크립트 코드를 파싱하여 AST 코드를 생성 후 실행
9. 그리고 DOM + CSSOM = Render Tree를 생성
10. 여기까지의 과정을 Construction이라고 한다.
11. 그리고 Rendering 엔진은 Render Tree에 있는 Node를 배치(Layout)
12. UI 백엔드는 Render Tree에 있는 Node들을 돌면서 화면에 UI를 그림(Painting)
13. 마지막으로 Render Tree에 있는 Node들을 순서대로 구성(Composition)
14. 여기까지의 과정을 Operation이라고 한다.
15. 마지막으로 웹 사용자에게 결과화면을 출력(Display)

​

---

세부 내용

 

Construction

 

STEP1. 웹브라우저 - DNS 

사용자가 브라우저로 웹 사이트에 접속(www.a.com) 하면 먼저 웹 브라우저는 DNS에게 호스트의 IP 주소를 물어본다.

그러면 DNS가 IP 주소(1.1.1.1)를 알려준다. 

 

STEP2. 웹브라우저 - Server

그리고 브라우저는 IP 주소에 있는 서버를 찾아갑니다. 이 때 랜덤한 숫자(Random Sequence)를 가지고 간다.

해당 Random Sequence를 가지고 데이터를 주고 받기 위한 3 Way Handshake(SYN - SYN/ACK - ACK)를 한다.

이 과정이 끝나면 브라우저는 서버에게 데이터를 요청한다. 이것을 HTTP Request라고 한다. 그리고 서버는 브라우저에게 데이터를 보내준다. 이것을 HTTP Response라고 한다.

 

STEP3. 웹브라우저 - Parsing

이 과정이 끝나면 웹 브라우저는 사용자에게 데이터를 출력하기만 하면 된다. 그런데 데이터를 출력하기에 앞서 브라우저는 서버로부터 받은 데이터를 해석해야 한다. 대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML과 CSS를 해석한다. 이렇게 해석하는 것을 Parsing이라고 한다.

먼저 브라우저의 랜더링 엔진은 HTML을 Parsing하여 DOM Tree를 생성한다. 이 때 랜더링 엔진이 Style 태그를 만나면 Dom 생성을 잠깐 중지하고 CSS를 Parsing하여 CSSOM Tree 생성한다. CSS Parsing을 마치면 조금전에 HTML Parsing이 중단된 지점부터 다시 Parsing을 시작한다. 그러다가 Script 태그를 만나면 다시 Parsing 작업을 중지하고 이번에는 JS Engine(자바 스크립트 엔진)에게 제어 권한을 넘긴다. JS Engine은 코드를 Parsing하여 추상 구문 Tree인 AST를 만들고 실행한다. 그 다음으로 아까 중단했던 HTML Parsing 작업을 완료 한다. 그리고 브라우저는 DOM Tree + CSSOM Tree = Render Tree를 생성한다.

• HTML Parsing - <style> 만남 , Dom 생성 중지 - CSS Parsing - 다시 HTML Parsing - <script> 태그 만남 - HTML Parsing 중지 - JS Engine Parsing - 마지막으로 HTML Parsing
• 여기서 주의할점은 CSS는 Parsing 차단 리소스가 아닌 Render 차단 리소스이기 때문에 Dom 생성만 중지

---

Operation

 

STEP1. Layout

그리고 랜더링 엔진은 Layout 작업을 시작하는데 이것은 Render Tree의 노드들은 화면의 올바른 위치에 표시하는 것을 의미한다.

 

STEP2. Painting

그리고 UI Backend가 Render Tree의 노드들을 돌면서 UI를 그린다.

 

STEP3. Composition

마지막으로 노드들의 레이어를 순서대로 구성하는 Compostion 단계이다. z-index가 낮은 요소를 먼저 놓고 그 다음에 높은 요소를 놓는 것이다.

 

---

부연 설명

 

이러한 Parsing과 Layout(배치) 그리고 UI를 그리는 작업은 서버로부터 모든 데이터를 받고 나서 시작하지 않는다. 브라우저는 사용자에게 더 빠른 화면을 출력해주기 위해 서버로부터 데이터를 일부를 받고 나서 화면에  표시하고 또 데이터를 받게 되면 화면에 표시하는 것을 반복한다. 이 때문에 웹 페이지의 화면이 한 번에 뜨지 않고 부분적으로 뜨는 현상이 나타나는 것이다.

 

---

Reference

https://aws.amazon.com/ko/route53/what-is-dns/

https://all-young.tistory.com/21

https://ddangjiwon.tistory.com/138

https://bbangson.tistory.com/87