[FE interview] Browser : #2 브라우저의 동작

오늘은 두 번째 단골 질문 '브라우저의 동작'에 대해서 알아보려고 한다.

 

이미 우리는 다양한 브라우저를 사용하고 있다!

그렇다면 브라우저는 어떻게 동작하여 지금 우리 화면에 띄워지는 걸까?

 

+)

쓸데없을 수도 있지만 재미있는 ? 사실은

Browser 의 어원이라는 Browse 는 '책이나 신문 등을 훑어보다.', '둘러보다.'라는 의미를 지니고 있다.

그래서 웹에서 여러 문서들을 보여주는 것, 훑어보는 도구라는 뜻으로 Browser가 되었다고 한다.

---

브라우저 ?

 

말로는 표현해본 적 없어도 우리는 이미 잘 알고 있다.

 

브라우저는 쉽게 말해서

사용자가 선택한 자원을 서버에 요청 / 전달받아서 보여주는 기능의 소프트웨어인 것이다.

 

그렇다면 우리가 보는 화면이 브라우저의 전부는 아닐 것이다.

우리 눈에는 보이지 않는 브라우저의 구성요소는 무엇이 있을까?

 

브라우저의 구성요소

 

 

복잡하고 어려워 보이지만 역할을 나누어 보면 조금 이해하기 쉬워진다!

하나씩 알아보자.

 

1. User Interface

사용자가 브라우저창에서 상호작용할 수 있는 GUI (주소 표시줄, 이전/다음 버튼, 북마크 등)

다만 웹 페이지 내부에 요청한 페이지를 보여주는 창(콘텐츠)은 포함하지 않는다!

 

2. Browsing Engine

UI 와 Rendering Engine 사이의 동작을 제어하는 중간다리 역할이다.

 

3. Rendering Engine

요청한 콘텐츠를 렌더링(HTML/CSS을 파싱)해 화면에 출력해주는 중요한 역할을 한다.

렌더링 엔진은 웹 브라우저 엔진, 웹 레이아웃 엔진이라고도 불린다.

 

4. Networking

HTTP 요청과 같은 네트워크 호출에 사용된다.

 

5. JS Engine

JavaScript Interpreter로 자바스크립트 코드를 해석해주는 엔진이다.

 

6. UI Backend

콤보 박스와 창 같은 기본적인 위젯을 그려주는 인터페이스이다.

 

7. Data Storage

Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역이다.

 

브라우저의 동작  :  렌더링 엔진 ?

우리가 보는 User Interface는 렌더링 엔진을 거친 결과물이 화면에 그려지는 것이라고 언급했다.

그렇다면 내부적으로 어떤 과정을 거쳐 화면에 출력되는 것일까?

 

렌더링 엔진마다 동작 과정은 조금씩 다르지만

기본적인 동작원리는 비슷하다!

 

🧑🏻‍💻   ➡️   🏪   ➡️   👷🏻‍♀️⚙️   ➡️   🔁   ➡️  👨🏻‍🎨   ➡️   🖼

사용자가 브라우저에 웹 주소를 입력한다.

그럼 브라우저는 DNS 서버로 진짜 주소(IP 주소)를 찾으러 간다...!

 

그리고 브라우저는 통신으로

서버야 클라이언트에게 자원을 보내줘 요청하게 되고 이후 데이터 패킷을 전달받는다.

 

이렇게 전달받은 자원을 화면에 표시하기 위해

브라우저가 읽고 처리할 수 있는 형식으로 변환하는 과정이 필요하다.

(우리가 조립식 가구를 택배로 받으면 언박싱해서 작은 조각들을 연결하는 것처럼...?)

 

HTML은 HTML Parser를 거쳐 ➡️  DOM 트리를

CSS (스타일 요소)는 CSS Parser를 거쳐 ➡️  CSSOM 트리를 생성한다.

그리고 DOM 트리와 CSSOM 트리를 결합(attachment)하여 '렌더 트리'를 생성한다.

 

이렇게 생성된 렌더 트리의 각 노드들을 배치하고

UI 백엔드에서 렌더 트리를 그리는 과정을 거쳐 우리의 화면에 출력되는 것이다.

(물론 당연한 이야기겠지만 렌더 트리를 구성하는 모든 요소들이 전부 우리 눈에 보이지는 않는다!)

 

 

렌더링 엔진의 렌더링 단계 

* 일련의 과정들이 점진적으로 진행됨

* 모든 HTML을 파싱 할 때까지 기다리지 않고 배치와 그리기 과정을 시작

* DOM : Document Object Model  /  CSSOM (Style Rules) : CSS Object Model 

 

 

우리가 사용하는 다양한 브라우저의 렌더링 엔진은 동일할까? 

브라우저마다 사용하는 렌더링 엔진과 자바스크립트 엔진은 다르다. 

그렇기 때문에 렌더링 엔진에 따라 같은 소스를 읽더라도 다르게 해석해서 표시하기도 한다.

 

브라우저별 렌더링 엔진 & 자바스크립트 엔진

 

---

How Web Browsers Work ?

웹브라우저가 서버와 통신하는 과정

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️

***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***