[부스트코스] Browser의 동작

안녕하세요 valid_ming입니다 : )

오늘은 서버에서 클라이언트로 전송된 데이터가 처리되어 화면에 보이게 되는 과정에 대해 알아보도록 하겠습니다.

 

우선, 서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳이 바로 Browser입니다.

Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔징이 포함되어있습니다.

 

 

오늘의 주제인 브라우저 또한 코드로 이루어져있는데요.

이렇게 브라우저의 페이지 소스 보기를 이용해 확인하실 수 있습니다.

 

사실 브라우저가 스스로 동작하기 때문에 따로 동작 과정을 따로 공부할 필요는 없습니다.

하지만, 내가 짠 코드가 브라우저에서 내 생각과 다르게 해석되어 동작된다던가

조금 더 효율적으로 브라우저에서 동작하도록 하기 위해 개발자들이 브라우저를 공부하게 되었습니다.

 

브라우저의 구성

브라우저는 브라우저 컴포넌트로 구성되어 있습니다.

브라우저 컴포넌트로 UI, Browser engine, Rendering engine, Networking, JavaScripit Interpreter, UI Backend, Data Pesistence가 있습니다.

 

UI는 화면에 보이는 모든 것이라고 생각하시면 됩니다. 

Browser engine은 소스코드를 실행해서 화면에 보여주는 엔진입니다.

브라우저 소프트웨어를 동작 시켜주는 핵심 엔진이죠.

Rendering engine은 화면에 보이는 디자인을 담당하는 엔진입니다. UI의 위치나 색칠등을 담당합니다.

브라우저마다 다른 종류로 존재합니다.

서버와 통신을 위한 네트워킹 컴포넌트가 있고, JavaScript 코드를 해석할 수 있는 Interpreter가 있습니다.

UI Backend는 UI 영역을 처리하는 부분입니다.

 

 

브라우저 엔진 메인 플로(main flow)에 대해 알아볼게요

 

1. Parsing HTML to construct the DOM tree

먼저 HTML을 파싱합니다. 여기서 파싱이란 소스코드를 문자 단위로 하나하나 해석을 해서 내용이 가진

의미들을 파악하는 것입니다. 

 

2. Render tree construction

해석된 내용들을을 트리 구조의 형태로 갖습니다.

 

3. Layout of the render tree

렌더 트리를 기준으로 CSS를 합쳐 스타일 정보와 구조를 결정합니다. 이를 통해 화면의 배치를 결정됩니다.

 

4. Painting the render tree

화면에 실제로 그림을 그려주는 작업입니다.

 

 

마지막으로는, 렌더링 엔진의 처리 과정에 대해 알아보겠습니다. 

사파리 브라우저에서 처리되는 렌더링엔진 처리과정

HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 CSS Tree를 만듭니다.

이 두가지를 병합하여 Render Tree를 만들고 색을 입혀(Painting) Display합니다.

 

 

이렇게 해서 오늘은 Browser의 컴포넌트와 동작과정에 대해 알아보았습니다.

 

[출처 : https://www.edwith.org/boostcourse-web/lecture/16663/]